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?

Answer 1

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();

---

Answer 2

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

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

Note that I include an alt set to an empty string, this is intentional to make screenreaders skip this empty image, but if you don't include the alt attribute some screenreaders will read the src value out loud.

PS: You might be confused later when you use DevTools and see these images showing up as 0 Byte Network requests, but don't be alarmed - that's just how DevTools works.

Answer 3

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