无法在我的angularjs项目中加载本地jpg文件

Question

我已经使用yeoman的generator-angular开始了一个小的angularjs app项目。

将jpg文件添加到app / images文件夹，并尝试使用链接到其中一个jpg文件的标记时，它们不会显示在浏览器中。

使用png文件时一切正常（使用相同的绝对路径/images/image.png和/images/image.jpg）。如果我使用远程URL到jpg文件一切正常。

我在这里缺少什么？我使用标签时遇到同样的问题。当使用本地绝对路径时，它不起作用，当我使用远程URL时，一切都很好。

非常感谢您的时间和帮助。

Answer 1

您需要使用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

Answer 2

您使用的是html5Mode吗？如果是这样，并且如果您使用connect-modrewrite将URL重写为index.html，请确保已排除jpg和jpeg文件。我最近遇到了同样的问题，并没有意识到我的重写规则是排除png图像而不是jpeg。