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

---