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
– user304602, Commented Oct 1, 2013 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
– user304602, Commented Oct 1, 2013 at 22:54

Community · Accepted Answer · 2020-06-20 09:12:55Z

42

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 1, 2013 at 21:28

Jean-Paul

21.3k11 gold badges67 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Emre Türkiş Over a year ago

do not use # as the source. for more info: stackoverflow.com/a/28077004/3841049

Alex Over a year ago

Using "//:0" as the src triggers the onError event on the img (at least in Chrome as of version 57)

Patrice Poliquin Over a year ago

//: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.

Drkawashima Over a year ago

As of Chrome 61 src="//:0" no longer seems to trigger the onError event

ronenfe Over a year ago

This shows a broken image in chrome after zooming in and out.

|

Drkawashima · Accepted Answer · 2023-01-06 15:17:46Z

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 6, 2023 at 15:17

answered Oct 10, 2017 at 18:46

Drkawashima

9,9805 gold badges47 silver badges56 bronze badges

1 Comment

Vitox Over a year ago

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)

Community · Accepted Answer · 2017-05-23 11:54:18Z

0

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 12, 2015 at 20:12

iGidas

4051 gold badge5 silver badges9 bronze badges

1 Comment

Emre Türkiş Over a year ago

please check the link. this method is obsolete.

Code Guru · Accepted Answer · 2018-05-01 12:14:16Z

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 1, 2018 at 12:14

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Sep 16, 2015 at 12:21

Dot Net

32 bronze badges

Comments

user4822420 · Accepted Answer · 2024-12-24 12:44:54Z

0

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>

answered Dec 24, 2024 at 12:44

user4822420

542 bronze badges

Collectives™ on Stack Overflow

Setting an image src to empty

5 Answers 5

Best solution

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Best solution

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related