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

Question

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

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

图像是在页面加载时动态生成的。当我单击此图像时， Controller 中的函数 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

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

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

更多信息请点击 https://docs.angularjs.org/api/ng/directive/ngSrc