Do I really need to have the src and ng-src attributes in the IMG tag? What is the function of each?

Asked

Viewed 562 times

5

I saw here that we have the creation of tag <img> with the attributes src and ng-src.

It really needs to be?

Even more that here the two attributes have the same value.

html angularjs angular
  • 1

    The difference between the src and the ng-src is that using the Angular directive it is possible to assign a source to the image via a value in the controller.

  • 1

    Here where? You can put the example?

  • Why <img class="img" ng-src="{{item.path}}"> turns into <img class="img" src=".../Image.jpg" ng-src=".../Image.jpg">? you would know to tell me if this is the standard behavior?

1 answer

5


ng-src is used by Angularjs, src it is not. The src is what you know about HTML, it carries an image with that name, you can say that it is static. The ng-src is interpreted by Angularjs and if the information that is there is correct it can load an image according to the constant identifier there that will be linked at the appropriate time.

Don’t forget that the HTML made for Angularjs is a template which must be completed at the time of execution with figures that make sense.

This example will take the value of variavel and will use as a name to be loaded.

<img ng-src="http://www.seudominio.com.br/imagem/{{variavel}}"/>

The value is likely to be defined in controller.

The example below will load an image called {{variavel}}, which is probably not what you want.

<img src="http://www.seudominio.com.br/imagem/{{variavel}}"/>

Now if it does:

<img ng-src="http://www.seudominio.com.br/imagem/variavel"/>

I put in the Github for future reference.

will load an image called variavel, after all it is not using the escape to indicate that there goes an Angularjs code and not a pure HTML.

Documentation.

  • Got it. So With ng-anything in the angular template we can change the value dynamically after angular execution. But in the case of img I have after angular execution src and ng-src. Why do I have the 2 in the rendered html? It wasn’t just having src because it was generated automatically? Why does the angler leave its trash there? Abs

  • That’s basically it. I don’t know why you have both. You didn’t even put that in the question, you didn’t give a context, nothing. Angularjs won’t touch what you’ve done.

  • On the question perhaps I did not make clear about src and ng-src. Following data: Rendered html: <img class="img" src=".../Image.jpg" ng-src=".../Image.jpg"> Template: <img class="img" ng-src="{item.path}}"> Then after rendering html it generates src. thanks for the answers.

  • you only need one of them

Browser other questions tagged html angularjs angular

You are not signed in. Login or sign up in order to post.