How to change image source attribute through directive

Question

I have the following image tag:

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

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

In this directive, I have defined the link function as:

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 images src attribute. I can see the image fetched clearly and a console.log(attrs) after assigning the image shows that the source attribute was updated with new image. But the DOM inspector in the browser shows no change to the source - it still shows default.png

I am using directive here and not controller - I understand I can use controller and use ng-src but I have this logic across multiple controllers and a directive is the best option I have. How do I change the source of the image tag? I wonder how ng-src does it?

"I wonder how ng-src does it?" => you know that angularjs is open source ? You should really use ngSrc — Jscti
– Jscti, Commented Jun 4, 2014 at 14:57
@Bixi :) I know that. I went through it but could not understand it. — callmekatootie
– callmekatootie, Commented Jun 4, 2014 at 15:09

callmekatootie · Accepted Answer · 2014-06-04 15:17:49Z

6

I found the cause.

To set values in the attribute, I needed to use attrs.$set(attribute_name, value).

Thus, I replaced attrs.src with attrs.$set('src', 'image_fetched_from_server.png'); and it worked!

answered Jun 4, 2014 at 15:17

callmekatootie

11.2k16 gold badges74 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sabhiram · Accepted Answer · 2014-06-04 15:07:17Z

0

ng-src is nothing but another directive which passes a "source" attribute (or binds it) to a given directive / whatever.

So - what is the name of the directive you are trying to make? One option might be to encompass the entire <img.../> tag in your image-loader-directive

The other issue that might be occurring, could have to do with the fact that your DOM defines src="default.png" instead of something like src="{{ image_src }}". This way the minute your directive decides to change the meaning of image_src - the DOM will refresh and hence pull the correct image from its source.

answered Jun 4, 2014 at 15:07

sabhiram

9077 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to change image source attribute through directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related