在沒有項目的轉發器中角度加載img src

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編譯ng-repeat及其內容之前將{{item.obj.thumbnailurl}}解釋為真正的src屬性。 這也是為什么即使img標簽在ng-repeat內也只能得到一個這樣的錯誤的原因。 使用ng-src ，angular會在編譯ng-repeat及其內容時在DOM中插入正確的src屬性。

Answer 2

問題是瀏覽器在解析標簽時立即加載圖像，這是在角度有機會用動態值替換它之前。 嘗試ng-src來解決這個問題。 同樣適用於href ，以避免用戶在Angular有機會用其值替換{{hash}}標記之前單擊它，試試ng-href

Answer 3

正如這里提到的那樣， ng-src解決了這個問題。 無論如何，如果要動態更改圖像源，請確保在代碼定義實際圖像之前為更好的UX定義默認值以顯示某些加載器圖像。