Question

I am using a FileReader to populate my images.

// i.e. .... e.target.result

If i set an image element source like this:

pic_upload_area.src = some_image;

I can get its dimensions like this:

width = pic_upload_area.clientWidth;

And things work fine. However if I now reset it to a new image like this:

pic_upload_area.src = '';
pic_upload_area.src = new_image;

and once again get the image like this:

width = pic_upload_area.clientWidth;

I find that it still has the old image width, and the new image has been malformed to fit the old image’s dimensions.

I find it strange that it works only on the first attempt. How can I get clientWidth to update when I update the .src attribute of the image?

Answer 1

The easiest way is to delete and recreate pic_upload_area. Once its dimensions are set, new image src will conform to the old dimensions.