[英]Angular loading img src in repeater without items
I have an angular repeater (table) which includes a src element. 我有一个角度转发器(表),其中包括一个src元素。 However, my URL gets called the first time before the items are loaded, causing one 404 load like this:
但是,在加载项目之前第一次调用我的URL,导致一个404加载,如下所示:
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. 作为搜索的结果,稍后将加载items数组。
What happens is each time I open this view (even without page reloads, just opening other views) I get that 404 error. 每次打开此视图时会发生什么(即使没有页面重新加载,只是打开其他视图)我得到404错误。
Why is that happening? 为什么会这样? How can I avoid it?
我怎么能避免呢?
As CodeHater suggests, using ng-src
will solve this issue. 正如CodeHater建议的那样,使用
ng-src
将解决这个问题。 The problem is that the browser interprets {{item.obj.thumbnailurl}}
as a real src
attribute before angular has compiled the ng-repeat
and its contents. 问题是浏览器在angular编译
ng-repeat
及其内容之前将{{item.obj.thumbnailurl}}
解释为真正的src
属性。 This is also the reason why you get exactly one such error even though the img
tag is inside a ng-repeat
. 这也是为什么即使
img
标签在ng-repeat
内也只能得到一个这样的错误的原因。 When using ng-src
, angular will insert the correct src
attribute in your DOM the moment it compiles the ng-repeat
and its contents. 使用
ng-src
,angular会在编译ng-repeat
及其内容时在DOM中插入正确的src
属性。
The problem is browsers load images immediately when the tag is parsed which is before angular has a chance to replace it with dynamic value. 问题是浏览器在解析标签时立即加载图像,这是在角度有机会用动态值替换它之前。 Try ng-src to fix that.
尝试ng-src来解决这个问题。 The same holds true for
href
, to avoid the user clicking it before Angular has a chance to replace the {{hash}} markup with its value, try ng-href 同样适用于
href
,以避免用户在Angular有机会用其值替换{{hash}}标记之前单击它,试试ng-href
As guys here mentioned, ng-src
fixes this problem. 正如这里提到的那样,
ng-src
解决了这个问题。 Anyway if you are changing the image source dynamically, be sure to define the default value for a better UX to show some loader image before the code defines the real image. 无论如何,如果要动态更改图像源,请确保在代码定义实际图像之前为更好的UX定义默认值以显示某些加载器图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.