Angular loading img src in elementless repeater

Question

I have an angular repeater (table) that includes an src element. However, my url is called for the first time before the elements are loaded, resulting in one 404 being loaded as follows:

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>

An array of elements is loaded later, as a result of the search.

What happens, every time I open this view (even without reloading the page, just opening other views), I get this 404 error.

Why is this happening? How can i avoid this?

Answer 1

CodeHater, ng-src . , {{item.obj.thumbnailurl}} src , angular ng-repeat . , ​​, img ng-repeat. ng-src, angular src DOM ng-repeat .

Answer 2

, , angular . ng-src, . href, , angular {{hash}} , -HREF

Answer 3

, ng-src . , , UX, - , .