What's the Valid Way to Include an Image With No Src

What's the valid way to include an image with no src?

While there is no valid way to omit an image's source, there are sources which won't cause server hits. I recently had a similar issue with iframes and determined //:0 to be the best option. No, really!

Starting with // (omitting the protocol) causes the protocol of the current page to be used, preventing "insecure content" warnings in HTTPS pages. Skipping the host name isn't necessary, but makes it shorter. Finally, a port of :0 ensures that a server request can't be made (it isn't a valid port, according to the spec).

This is the only URL which I found caused no server hits or error messages in any browser. The usual choice — javascript:void(0) — will cause an "insecure content" warning in IE7 if used on a page served via HTTPS. Any other port caused an attempted server connection, even for invalid addresses. (Some browsers would simply make the invalid request and wait for them to time out.)

This was tested in Chrome, Safari 5, FF 3.6, and IE 6/7/8, but I would expect it to work in any browser, as it should be the network layer which kills any attempted request.

Setting an image src to empty

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

Inputting a default image in case the src attribute of an html img is not valid?

You asked for an HTML only solution...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>  <title>Object Test</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
  <p>    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">    </object>  </p>
</body>
</html>

Is it valid to set img src=about:blank?

You could use the "data:" URI scheme to embed an image.

Other replaced elements might also work. Setting display to "inline-block" might also be worth looking into.

Reactjs İmage sources seeming like src=[object Module]

I'm not sure how did you load this template with webpack inside a html plugin or a via a loader but looks like require('thing') returns a module object which has default prop as a string path you need.

src={require("../../assets/stores/apple-store-badge.png").default}

I'm guessing you currently have enabled esModule object for a loader which is likely file-loader or url-loader causing the issue. If so, you just simply turn it off then it exports the right url for you (without exporting as a module)

Refine a variable that Assign src of image into a variable through JS combined with a variable of changing letters

what about adding a check, if the last 4 characters is .jpg or .png then show an <img> element with it's src pointing to the image?

click "run code snippet" (image taken from google's logo since it's small and fast to load)

var a = [, 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o', 'A', 'a', 'B', 'b', 'C', 'c', 'De', 'De', 'S', 's', 'T', 't', 'U', 'u', 'D', 'd', 'I', 'i', 'O', 'o',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
];

c = 0, 5;
setInterval(function() {
    c++;
    var letter = a[c];
    var length = a.length;
    if (c > length) { c = 0, 5; }
    
  if(letter != undefined && letter.length>5 && (letter.substr(letter.length-4, 4)==".png" || letter.substr(letter.length-4, 4)==".jpg") ) {
    $("#mydiv").html("<img src='"+letter+"'>");
  } else { 
    $("#mydiv").text(letter);
  }
}, 25);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mydiv"></div>

What's the Valid Way to Include an Image With No Src