Не удается загрузить локальные файлы jpg в моем проекте angularjs

Question

Я запустил небольшой проект приложения angularjs, используя генератор yeoman-angular.

При добавлении файлов jpg в папку app/images и попытке использовать тег, ссылающийся на один из этих файлов jpg, они не отображаются в браузере.

При использовании файлов png все в порядке (используется тот же абсолютный путь /images/image.png и /images/image.jpg).Если я использую удаленный URL-адрес для jpg-файла, все работает нормально.

Чего мне здесь не хватает?У меня такая же проблема с использованием тега.При использовании локального абсолютного пути это не работает, а когда я использую удаленный 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/';
};

позволит angular загружаться, творить свое волшебство, а затем корректно ссылаться на источник изображения из path переменная, удерживаемая в $scope от контроллера.

В противном случае изображение пытается загрузиться из src атрибут еще не успел получить значение.

Демонстрация в плунжере: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview