无法在我的angularjs项目中加载本地jpg文件
-
21-12-2019 - |
题
我已经使用yeoman的generator-angular启动了一个小型angularjs应用程序项目。
将jpg文件添加到app/images文件夹并尝试使用链接到其中一个jpg文件的标签时,它们不会显示在浏览器中。
使用png文件时,一切正常(使用相同的绝对路径/图像/图像。png和/图像/图像。jpg)。如果我使用远程URL到jpg文件,一切正常。
我在这里错过了什么?我在使用标签时遇到了同样的问题。当使用本地绝对路径时,它不起作用,当我使用远程url时,一切都很好。
非常感谢您的时间和帮助。
解决方案
您使用的是html5mode吗?如果是这样,如果使用Connect-ModRewrite将URL重写为index.html,请确保已排除JPG和JPEG文件。我最近遇到了同样的问题,并没有意识到我的重写规则是不包括PNG图像,而不是JPEG。
其他提示
您需要使用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
不隶属于 StackOverflow