Setting an image src to empty

Question

I would like to set an image as nothing. By doing src="" many people say it can cause problems to browsers:

http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

so I am not sure if below can face to the same problem as setting src to empty:

<img id="myImage">

since there's no src attribute on this case.

So If I want to initially set an image to nothing, what's the best I can do?

because initially there's no image, and when process finished, i put an image depending on the process has passed or failed. — user304602, Oct 01 '13 at 22:45
Ok, using a div and setting its background-image seems to be a good idea. But what are the differences between using img or div with background-image in terms of performance? in my case there a some images loading at the same time and they can be animated gifs, so img or div? is div back-ground compatible with animated gifs? — user304602, Oct 01 '13 at 22:54

score 41 · Accepted Answer · edited Jun 20 '20 at 09:12

41

Best solution

Initialise the image as follows: src="//:0" like here: <img id="myImage" src="//:0">

Edit: as per the comment of Alex below, using //:0 apparently can trigger the onError event of the img. So beware of this.

Edit 2: From comment by Drkawashima: As of Chrome 61 src="//:0" no longer seems to trigger the onError event.

Other solution

Alternatively, you can use a very small image until you actually fill the src tag: like this image. With this 'very small image', you would then initialise the tag like so:

<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />

source

Remove element from DOM

Alternatively, if you simply don't want the element to appear in the DOM, just use some JavaScript:

var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);

_{(as per this answer, using JavaScript's .remove() function is not recommended, due to poor browser support in DOM 4)}

Or just use some jQuery:

$("#myObject").remove();

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 01 '13 at 21:28

Jean-Paul

19,910
9
62
88

do not use # as the source. for more info: http://stackoverflow.com/a/28077004/3841049 – Emre Türkiş Dec 29 '16 at 07:52
2

Using "//:0" as the `src` triggers the `onError` event on the `img` (at least in Chrome as of version 57) – Alex Apr 03 '17 at 17:50
1

//:0 clearly saved my life. Did not care about the error, since is for a internal project :) I was setting the attr.src by jQuery but it always placed a display:none!important what ever I did. – Patrice Poliquin Jun 20 '17 at 20:22
@PatricePoliquin Glad to hear that. Good luck with your project. – Jean-Paul Jun 20 '17 at 20:23
1

As of Chrome 61 `src="//:0"` no longer seems to trigger the `onError` event – Drkawashima Oct 10 '17 at 18:50
@Drkawashima Useful comment! Thanks for letting us know! – Jean-Paul Oct 10 '17 at 21:26
2

This shows a broken image in chrome after zooming in and out. – Ronen Festinger Nov 14 '18 at 13:37

Drkawashima · Answer 2 · 2023-01-06T15:17:46.653

24

Using a 1px transparent encoded image is an accepted solution (recommended by CSSTricks)

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">

PS: Don't be confused later when DevTools shows these as network requests of zero bytes, that's just how DevTools works, all imgs are listed as network requests.

DS: alt="" is included because otherwise, screenreaders will read the src out loud

edited Jan 06 '23 at 15:17

answered Oct 10 '17 at 18:46

Drkawashima

8,837
5
41
52

1

I upvoted it because it's a transparent image/gif. That is a lot more flexible than the white image supplied on the accepted answer. That's great, thanks! (you could mention it in your answer) – Vitox Feb 05 '21 at 08:46

score 0 · Answer 3 · edited May 23 '17 at 11:54

0

Just use a hash symbol #. It's valid value for src attribute. :) https://stackoverflow.com/a/28077004/3841049

edited May 23 '17 at 11:54

Community

1
1

answered Feb 12 '15 at 20:12

iGidas

405
1
5
9

2

please check the link. this method is obsolete. – Emre Türkiş Dec 29 '16 at 07:52

score 0 · Answer 4 · edited May 01 '18 at 12:14

0

Use this script to set a default image if src is empty or blank

$(document).ready(function () {
   $('img').each(function () {
       if($(this).attr('src')=="") {
          $(this).attr('src', 'Images/download.jpg');
       }
   });
});

edited May 01 '18 at 12:14

Sunil Garg

14,608
25
132
189

answered Sep 16 '15 at 12:21

Dot Net

3
2

Setting an image src to empty

4 Answers4

Best solution