Setting image src attribute not working in Chrome

Question

I want to get the src of one image and set it as another's src when #btn is pressed:

jQuery("#btn").live("click", function() {
    jQuery("#another_div")
        .children("img")
        .attr("src", jQuery(this).prev("img").attr("src"));
    jQuery(this)
        .prev("img")
        .attr("src","");
})

I have also tried:

jQuery(this).prev('img').removeAttr("src");

It works fine in Firefox, IE7-9, and Safari.

Only in Chrome, the image is not removed even when the source changes (src="").

score 31 · Accepted Answer · answered Dec 08 '11 at 03:39

31

You could change it to

jQuery(this).attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");

maybe?

answered Dec 08 '11 at 03:39

Joseph Marikle

76,418
17
112
129

Hi Joseph, it seems this works when you do this. Can you explain what is this you have put for the src value? See http://jsfiddle.net/K7SBx/1/ – Manjula Dec 08 '11 at 04:13
6

Ok I got it. it is a base64 encoded string for a 1px by 1px transparent GIF image. – Manjula Dec 08 '11 at 04:16
@ManjulaWeerasinge You are correct. :) I should have explained that. XD Sorry, I did not see your question until this morning. – Joseph Marikle Dec 08 '11 at 13:10

score 3 · Answer 2 · answered Jan 04 '13 at 13:02

Since in my case by doing this

$(this).attr("src","");

clearing the src attribute, but, image does not vanish. Hence I just set, img tag style attribute display to none, like this

$(this).attr("src","").css("display", "none");

It will hide the image. I hope, it will temporarily work for you.

score 2 · Answer 3 · answered Sep 18 '18 at 20:24

2

The following works well with Chrome and does not seem to give any messages to console:

image.src = "about:blank"; // Clear source path

answered Sep 18 '18 at 20:24

Ari Okkonen

165
1
10

score 2 · Answer 4 · answered Dec 08 '11 at 03:39

2

try remove image and append it again

jQuery('#another_div').children("img").remove()
jQuery('#another_div').append('<img>').attr("src",jQuery(this).prev('img').attr("src"));

answered Dec 08 '11 at 03:39

Chamika Sandamal

23,565
5
63
86

score 1 · Answer 5 · answered Dec 08 '11 at 03:57

1

jQuery('#btn').live("click", function() {
    jQuery('#another_div')
        .children("img")
        .attr("src", jQuery(this).prev('img').attr("src"));
    jQuery(this)
        .prev('img').remove();
})

answered Dec 08 '11 at 03:57

Terry

14,099
9
56
84

score 0 · Answer 6 · edited May 23 '17 at 12:02

This worked for me:

var $image = $('.my-image-selector');
$image.removeAttr('src').replaceWith($image.clone());

However, be wary of any event handlers that you might have attached to the image. There's always the withDataAndEvents and deepWithDataAndEvents options for jQuery clone, but I haven't tested the code with them: http://api.jquery.com/clone/#clone-withDataAndEvents

Also, if you want to do this for multiple images, you will probably have to use something like jQuery each.

I posted an identical answer on a similar question: Clear an IMG with jQuery

score 0 · Answer 7 · answered Dec 08 '11 at 03:35

0

try to set the src first to blank

$(this).attr("src","");

then

$(this).removeAttr("src");

answered Dec 08 '11 at 03:35

Netorica

18,523
17
73
108

Warning: Do not do this. This will cause an additional server request! http://www.bennadel.com/blog/2236-empty-src-and-url-values-can-cause-duplicate-page-requests.htm – Mister Oh Jan 07 '15 at 21:04

Setting image src attribute not working in Chrome

7 Answers7

Linked

Related