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

Source: Internet
Author: User
Tags html tags

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.