没有物品的中继器中的角加载 img src

Angular loading img src in repeater without items

本文关键字：加载 img src 中继器      更新时间：2023-09-26

我有一个角度中继器（表），其中包括一个src元素。但是，在加载项目之前第一次调用我的 URL，导致如下所示的 404 加载：

http://localhost:9000/%7B%7Bitem.obj.thumbnailurl%7D%7D 404 (Not Found)

该表如下所示（简化）：

<table>
    <thead>
        <tr>
            <th>Item title</th>
            <th>Link</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items">
            <td>{{item.obj.itemtitle}}</td>
            <td>
                <a href="{{item.obj.landingpageurl}}">
                    <img src="{{item.obj.thumbnailurl}}"/>
                </a>
            </td>
        </tr>
    </thead>
</table>

作为搜索的结果，稍后将加载 items 数组。

每次打开此视图（即使没有重新加载页面，只是打开其他视图）时，都会收到 404 错误。

为什么会这样？我怎样才能避免它？

正如CodeHater所建议的那样，使用ng-src将解决此问题。问题在于，在 angular 编译ng-repeat及其内容之前，浏览器{{item.obj.thumbnailurl}}解释为真正的src属性。这也是为什么即使img标签在ng-repeat内，您也只收到一个此类错误的原因。当使用 ng-src 时，angular 会在编译ng-repeat及其内容的那一刻在 DOM 中插入正确的 src 属性。

问题是浏览器在解析标签时立即加载图像，这是在 angular 有机会用动态值替换它之前。尝试ng-src来解决这个问题。这同样适用于href，为了避免用户在 Angular 有机会用其值替换 {{hash}} 标记之前单击它，请尝试 ng-href

正如这里的人所提到的，ng-src解决了这个问题。无论如何，如果要动态更改图像源，请确保定义默认值以获得更好的UX，以便在代码定义真实图像之前显示一些加载器图像。

相关文章：