내 Anglejs 프로젝트에서 로컬 jpg 파일을 로드할 수 없습니다.

Question

저는 yeoman의 Generator-Angular를 사용하여 작은 Anglejs 앱 프로젝트를 시작했습니다.

app/images 폴더에 jpg 파일을 추가하고 이러한 jpg 파일 중 하나에 연결되는 태그를 사용하려고 하면 브라우저에 표시되지 않습니다.

png 파일을 사용할 때 모든 것이 정상입니다(동일한 절대 경로 /images/image.png 및 /images/image.jpg 사용).jpg 파일에 대한 원격 URL을 사용하면 모든 것이 잘 작동합니다.

내가 여기서 무엇을 놓치고 있는 걸까요?태그를 사용해도 같은 문제가 있습니다.로컬 절대 경로를 사용하면 작동하지 않으며 원격 URL을 사용하면 모든 것이 정상입니다.

시간을 내어 도움을 주셔서 감사드립니다.

Answer 1

HTML5Mode를 사용하고 있습니까?그렇다면 Connect-modrewrite를 사용하여 URL을 index.html로 다시 작성하는 경우 JPG 및 JPEG 파일을 제외했는지 확인하십시오.나는 최근에 같은 문제에 직면했으며 재 작성 규칙이 PNG 이미지를 제외했지만 JPEG는 아닙니다.

Answer 2

각도 표현을 사용해야합니다 {{}} ~을 위한 ng-src 일하다.

예를 들어 다음 HTML 마크업을 사용하면 다음과 같습니다.

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

다음과 같은 컨트롤러를 사용합니다.

function MyCtrl($scope) {
    $scope.path = 'https://si0.twimg.com/profile_images/';
};

각도가 로드되고 마법을 수행한 다음 이미지 소스를 올바르게 참조할 수 있습니다. path 변수가 보유됨 $scope 컨트롤러에서.

그렇지 않으면 이미지가 다음에서 로드하려고 시도합니다. src 속성에 아직 값을 가져올 시간이 없습니다.

플런커 데모: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview