내 Anglejs 프로젝트에서 로컬 jpg 파일을 로드할 수 없습니다.
-
21-12-2019 - |
문제
저는 yeoman의 Generator-Angular를 사용하여 작은 Anglejs 앱 프로젝트를 시작했습니다.
app/images 폴더에 jpg 파일을 추가하고 이러한 jpg 파일 중 하나에 연결되는 태그를 사용하려고 하면 브라우저에 표시되지 않습니다.
png 파일을 사용할 때 모든 것이 정상입니다(동일한 절대 경로 /images/image.png 및 /images/image.jpg 사용).jpg 파일에 대한 원격 URL을 사용하면 모든 것이 잘 작동합니다.
내가 여기서 무엇을 놓치고 있는 걸까요?태그를 사용해도 같은 문제가 있습니다.로컬 절대 경로를 사용하면 작동하지 않으며 원격 URL을 사용하면 모든 것이 정상입니다.
시간을 내어 도움을 주셔서 감사드립니다.
해결책
HTML5Mode를 사용하고 있습니까?그렇다면 Connect-modrewrite를 사용하여 URL을 index.html로 다시 작성하는 경우 JPG 및 JPEG 파일을 제외했는지 확인하십시오.나는 최근에 같은 문제에 직면했으며 재 작성 규칙이 PNG 이미지를 제외했지만 JPEG는 아닙니다.
다른 팁
각도 표현을 사용해야합니다 {{}}
~을 위한 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
속성에 아직 값을 가져올 시간이 없습니다.