CODEWITHSUNDEEP
htmlimagesrc
user304602
user304602

Reputation: 991

Setting an image src to empty

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?

Upvotes: 29

Views: 84314

Answers (5)

user4822420
user4822420

Reputation: 54

The broken image goes away with Chrome when there is no src attribute inside the element.

<html>
<title></title>
<body>
// broken image
<img id='image_id' src=""> 

// does not show a broken image
<img id='image_id'>

</body>
</html>

My solution is to use the the removeAttribute to get ride of the broken image.

<script>
var img_obj = document.getElementById('image_id);

img_obj.removeAttribute('src');
</script>

Upvotes: 0

Drkawashima
Drkawashima

Reputation: 9812

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

Upvotes: 24

Dot Net
Dot Net

Reputation: 3

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');
       }
   });
});

Upvotes: 0

Jean-Paul
Jean-Paul

Reputation: 21180

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

Upvotes: 41

iGidas
iGidas

Reputation: 403

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

Upvotes: 0

Related Questions