AngularJS 的动态文件名显示 JSHint 错误

Question

我的 AngularJS DOM 有以下元素...

<img class="optional" src="assets/img/{{ctrl.optional}}.png" ng-click="ctrl.clickOptional()">

图像是在页面加载时动态生成的。当我点击这张图片时，我控制器中的函数clickOptional() 运行完美地改变了图片。

问题是，当浏览器加载我的页面时，控制台显示以下错误：

http://localhost:8787/public/assets/img/%7B%7Bbctrl.optional%7D%7D.png Failed to load resource: the server responded with a status of 404 (Not Found)

我知道这是因为在加载 AngularJS 之前检查了 DOM 结构。

是否有一些解决方法来解决它？最好的方法是什么？

Answer 1

问题是因为浏览器可以“看到”原始 url，其中包含“%7B%7Bbctrl.optional%7D%7D”部分。您可以通过放置 ng-src 而不是 src 来解决此问题，例如

<img ng-src="assets/img/{{ctrl.optional}}.png">

更多https://docs.angularjs.org/api/ng/directive/ngSrc