4

I have an angular repeater (table) which includes a src element. However, my URL gets called the first time before the items are loaded, causing one 404 load like this:

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

The table looks like this (simplified):

<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>

The items array is loaded later, as a result of a search.

What happens is each time I open this view (even without page reloads, just opening other views) I get that 404 error.

Why is that happening? How can I avoid it?

4

3 回答 3

7

正如 CodeHater 所建议的，使用ng-src将解决这个问题。问题是浏览器在 Angular 编译其内容之前将其解释{{item.obj.thumbnailurl}}为真实属性。这也是为什么即使标签位于. 使用 时，angular 将在编译及其内容的那一刻在您的 DOM 中插入正确的属性。srcng-repeatimgng-repeatng-srcsrcng-repeat

于 2013-11-09T08:50:11.120 回答
2

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

于 2013-11-09T08:49:39.567 回答
1

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

于 2013-11-09T09:28:19.463 回答