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

Question

我已经使用yeoman的generator-angular启动了一个小型angularjs应用程序项目。

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

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

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

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

Answer 1

您使用的是html5mode吗？如果是这样，如果使用Connect-ModRewrite将URL重写为index.html，请确保已排除JPG和JPEG文件。我最近遇到了同样的问题，并没有意识到我的重写规则是不包括PNG图像，而不是JPEG。

Answer 2

您需要使用angular表达式 {{}} 为 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 attribute还没来得及获取值。

在一个plunker演示: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview