Question

我有一个页面使用AngularJS来显示数据，并根据用户选择显示图像。

网站有效，但在控制台中我遇到了这个问题：

Failed to load resource: the server responded with a status of 404 (Not Found) http://mysite.app/images/places/undefined

这是html：

<img width="100%" height="100%" ng-src="@{{ selectedEvent.place.image | addFullPathToImage }}" alt="@{{ selectedEvent.place.name }}">

这是角度代码：

app.filter('addFullPathToImage', function () {
    return function (text) {
        return mysite.paths.placesPath + "/" + text;
    }
});

图像有效，如何删除控制台错误？

Answer 1

显然selectedEvent.place.image首先在第一个摘要周期中被解析为未定义，它为您提供404，稍后设置其实际值，另一个摘要周期显示图像。

您可以通过代码了解为什么在2个不同的周期内完成。在设置selectedEvent.place.image之前，您是否正在使用异步操作，例如服务器调用？

一个快速的解决方法是，只有在范围内设置了其值后，才将图像放入HTML中。要做到这一点，你只需添加ng-if这样：

<img
  ng-if  = "selectedEvent.place.image"
  width  = "100%"
  height = "100%"
  ng-src = "@{{ selectedEvent.place.image | addFullPathToImage }}"
  alt    = "@{{ selectedEvent.place.name }}"
>

PS：width和height属性已经过时，您应该尝试使用style属性或单独的CSS。

Angular和html - 无法加载资源

1 个答案: