How to set image src to empty?

Question

Possible Duplicate:
Setting image src attribute not working in Chrome

When user clicks on "remove" link I need to set the src attribute of an image to empty. When I do it using

$('#img').prop('src', null);

src is not empty but points to current url

if I remove src using

$('#img').removeProp('src');

never let me to assign it back in the future

What's the best way to accomplish this?

Please see [this answer](http://stackoverflow.com/a/8425853/561731) — Naftali, Dec 05 '12 at 15:35
An empty string can actually be a valid src for an image, technically speaking it is not "removing" the src. Same as `#`, it would use the current URL plus the hash. Real example: http://lcamtuf.coredump.cx/squirrel/ You would end up sending a request to the current URL. I would suggest using another approach. — Wesley Murch, Dec 05 '12 at 15:42

Adil · Accepted Answer · 2015-05-29T04:13:12.777

15

Try using attr(),

Live Demo

$('#img').attr('src', '');

As you have id selector. Using the native javascript method document.getElementById will give you more performance benefit. Also you may need to set # as src instead of empty string.

document.getElementById('img').src = "#";

edited May 29 '15 at 04:13

answered Dec 05 '12 at 15:26

Adil

146,340
25
209
204

6

I'm afraid this doesn't work. Still pointing to current url instead of having an empty value. – StackOverflower Dec 05 '12 at 15:28
I have added live demo in my answer, check if it works – Adil Dec 05 '12 at 15:34
@Adil [this does not work with a real image](http://jsfiddle.net/Vnj53/1/) – Naftali Dec 05 '12 at 15:43
2

It's a Chrome issue apparently. – Wesley Murch Dec 05 '12 at 15:43
This works from javascript point of view, for now it's enough for me. Thanks! – StackOverflower Dec 05 '12 at 15:47
this now shows a broken image – stackers Apr 09 '22 at 12:28

jAndy · Answer 2 · 2012-12-05T15:41:15.063

6

I'd just access the underlaying <img> node and set the value of src to an empty string.

$('#img')[ 0 ].src = '#';

Fiddle: http://jsfiddle.net/P4pRu/

Update: It seems like Chrome is not satisfied when we just pass in an empty string. Firefox still shows the expected behavior (I'm pretty sure that this also worked in Chrome a couple of weeks/versions ago).

However, passing over a # for instance, works fine.

Update 2:

Even imgNode.removeAttribute('src'); does no longer remove the visual representation of an image anymore in Chrome (interesting...).

edited Dec 05 '12 at 15:41

answered Dec 05 '12 at 15:27

jAndy

231,737
57
305
359

1

I'm afraid this doesn't work. Still pointing to current url instead of having an empty value. – StackOverflower Dec 05 '12 at 15:30
1

@TimmyO'Tool: indeed. Wierd behavior which to me seems, "new". However, it works if you pass in a `#` for instance. – jAndy Dec 05 '12 at 15:33
2

An empty string can actually be a valid src for an image, technically speaking it is not "removing" the src. Same as `#`, it would use the current URL plus the hash. Real example: http://lcamtuf.coredump.cx/squirrel/ You would end up sending a request to the current URL. – Wesley Murch Dec 05 '12 at 15:37

score 0 · Answer 3 · answered Dec 05 '12 at 15:32

0

The attribute 'src' isn't really a property, it is an attribute. Think of properties as things that can be set with booleans or lists and attributes as things that are much more dynamic.

$('#img').attr('src', '');

As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes - http://api.jquery.com/prop/

answered Dec 05 '12 at 15:32

Jay Blanchard

34,243
16
77
119

Test your answer, it doesn't work (although your notes are correct). – Wesley Murch Dec 05 '12 at 15:33
Yes, it does. Just tested in jsfiddle - http://jsfiddle.net/aAfvx/1/ – Jay Blanchard Dec 05 '12 at 15:40
1

Looks like it's a Chrome issue, try it in Chrome. – Wesley Murch Dec 05 '12 at 15:40

How to set image src to empty?

3 Answers3