Question

我有一个角度转发器（表），其中包含一个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错误。

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

Answer 1

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

Answer 2

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

Answer 3

正如大家提到的那样，ng-src解决了这个问题。无论如何，如果要动态更改图像源，请确保在代码定义实际图像之前为更好的UX定义默认值以显示某些加载器图像。

在没有项目的转发器中角度加载img src

3 个答案: