How to change the image source attribute using the directive

Question

I have the following image tag:

<img src="default.png" data-new-image/>

newImage is a directive that I defined that will retrieve an image from the server (based on some criteria), and while it calculates and retrieves the image, I have the default.png image file displayed.

In this directive, I defined the function linkas:

return {
    link: function (scope, element, attrs) {
        //My custom logic here to determine which image to show
        //and then fetch from the server
        //After HTTP request, assigning image to image source
        attrs.src = "image_fetched_from_server.png";
    }
};

But this does not update the src attribute of the images. I see that the image is clearly visible, and console.log(attrs)after assigning the image shows that the source attribute has been updated with a new image. But the DOM inspector in the browser does not show any changes in the source - it still shows default.png

, . , ng-src, , - , . ? , ng-src?

Answer 1

.

, attrs.$set(attribute_name, value).

, attrs.src attrs.$set('src', 'image_fetched_from_server.png');, !

Answer 2

ng-src - , , "" ( ) /.

- , ? , <img.../> image-loader-directive

, , , DOM src="default.png" , - src="{{ image_src }}". , image_src - DOM , , .