AngularJS图像源URL

Question

我的html中有以下代码：

<img class="profileImage" src="api/files/profileimage/{{vm.foundedUser.profileImagePath}}/" alt="profileImage" />

在加载时 vm.foundedUser.profileImagePath 未设置，因为首先必须搜索用户才能显示配置文件图像。 因此，我在页面加载时遇到以下浏览器错误：

  

＆＃34; NetworkError：403禁止 - http://localhost:8082/api/files/profileimage/%7B%7Bvm.foundedUser.profileImagePath%7D%7D/＆＃34;

我现在的问题是如何防止这种情况。我尝试了 ng-show ，但没有成功。

Answer 1

使用ng-src：

  

在src属性中使用{{hash}}之类的Angular标记无法正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

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

<img class="profileImage" ng-src="api/files/profileimage/{{vm.foundedUser.profileImagePath}}/" alt="profileImage" />

Answer 2

写它的错误方法：

<img class="profileImage" src="api/files/profileimage/{{vm.foundedUser.profileImagePath}}" alt="profileImage" />

写它的正确方法：

<img class="profileImage" ng-src="api/files/profileimage/{{vm.foundedUser.profileImagePath}}" alt="profileImage" />