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

Question

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

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

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

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您需要使用角度表达式{{}}才能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属性加载还没有时间获取值。

2 回答 2