The use of NG-SRC instructions in Angularjs is detailed _angularjs

Objective

In daily development work, there are many requirements to display some pictures on a page. Sometimes, the image's address path is set by the client's script (it may be obtained from the database).

This is the era of ANGULARJS, when we want to use ANGULARJS to achieve the display of pictures in the page, we will simply use:.

If we only consider showing, there is no doubt that it is OK, but a 404 (not found) error is displayed in the console of the browser.

In order to solve this problem, we need to use ng-Src . ng-Srcbefore I use it, I want to show you how this error occurred.

The sample code is as follows:

Sample source Code

Script.js

var testApp = angular 
        . Module ("Testmodule", []) 
        . Controller ("TestController", function ($scope) { 
          var Animal = { 
            Name: "CAT", 
            Color: "White", Picture 
            : "/images/cat.jpg", 
          }; 
 
          $scope. Animal = animal; 
 
        

Index.html

In the example above, there is a animal class that has three properties: Name , Color and, and Picture has already been assigned a value. Using the model binder, I use these properties on the page. For pictures, I use HTML tags.

Then run this example, the effect is as follows:

Then open the console of the browser and you will see this error.

Unable to load resource: Server response status is 404 (not Found).

So the question arises, why is this error? What should be done?

reason- when the DOM is parsed, an attempt is taken to get the picture from the server. At this point, the src angularjs binding expression on the property has {{ model }} not been executed, so there are 404 errors that are not found.

Solution- The version to be resolved is to use the substitution attribute in the picture, and the ng-Src request will only be issued after src angular executes the binding expression.

Examples of using NG-SRC are as follows:

Now that you open the console of your browser again, you will not see: 404 is not found, this is because of the use ng-Src .

Defined

ng-Src- This instruction overrides the native attribute of the element src .

Summarize

The above is the entire content of this article, I hope you can enjoy, if there are questions can be exchanged message.