How to avoid the initial GET of an img tag?

Question

When loading the page the following error occurs:

<div class="row" ng-show="showChannels">
  <div ng-repeat="content in formChannels" class="col-sm-2">
    <div class="well alignCenter" ng-click="clickSintonizarCanal($index)">
      <img src="{{content.images.image[0].url}}" class="img-responsive imgchannel" alt="{{$index}}">
    </div>
  </div>
</div>

I understand that is because when you start the page "formChannels" is null. then when formChannels already has a value, everything works OK.

my question is, how do I avoid this unnecessary GET?

there is some way "Standar", Elegant, or simple to do it?

AngularJS has something for these cases?

thank you very much to all!

score 5 · Accepted Answer · answered Jun 22 '16 at 14:15

5

Just use ng-src. This will create the src attribute once it is ready.

<img ng-src="{{content.images.image[0].url}}" />

answered Jun 22 '16 at 14:15

Buh Buh

7,443
1
34
61

It works like a charm! Thanks for the quick reply! – Nicolas Mastromarino Jun 22 '16 at 14:16

score 1 · Answer 2 · answered Jun 22 '16 at 14:17

What you need to use is the ng-src directive. That way the browser won't try and load the image until angular has been bootstrapped. See here for documentation.

https://docs.angularjs.org/api/ng/directive/ngSrc

So your image tag will look like this:

<img ng-src="{{content.images.image[0].url}}" class="img-responsive imgchannel" alt="{{$index}}">

How to avoid the initial GET of an img tag?

2 Answers2