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

Question

I have an image that I will dynamically populate with a src later with javascript but for ease I want the image tag to exist at pageload but just not display anything  I know  lt img src      gt  is invalid so what s the best way to do this

User · Answer

I personally use an about blank src and deal with the broken image icon by setting the opacity of the img element to 0

User · Answer

I found that simply setting the src to an empty string and adding a rule to your CSS to hide the broken image icon works just fine    src           visibility  hidden

User · Answer

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

User · Answer

As written in comments  this method is wrong   I didn t find this answer before  but acording to W3 Specs valid empty src tag would be an anchor link     Example  src      src   empty   Page validates successfully and no extra request are made

User · Answer

I recommend dynamically adding the elements  and if using jQuery or other JavaScript library  it is quite simple      http   api jquery com appendTo     http   api jquery com prependTo    http   api jquery com html    also look at prepend and append   Otherwise if you have an image tag like that  and you want to make it validate  then you might consider using a dummy image  such as a 1px transparent gif or png

User · Answer

Another option is to embed a blank image  Any image that suits your purpose will do  but the following example encodes a GIF that is only 26 bytes - from http   probablyprogramming com 2009 03 15 the-tiniest-gif-ever   lt img src  data image gif base64 R0lGODlhAQABAAD ACwAAAAAAQABAAACADs   width  0  height  0  alt      gt    Edit based on comment below   Of course  you must consider your browser support requirements  No support for IE7 or less is notable  http   caniuse com datauri

User · Answer

These days IMHO the best short  sane  amp  valid way for an empty img src is like this    lt img src  data    alt gt  or  lt img src  data    alt  Alternative Text  gt    The second example displays  Alternative Text   plus broken-image-icon in Chrome and IE     data    is a valid URI  An empty media-type defaults to text plain  So it represents an empty text file and is equivalent to  data text plain    OT  All browsers understand plain alt  You can omit       it s implicit per HTML spec

User · Answer

if you keep src attribute empty browser will sent request to current page url  always add 1 1 transparent  img  in src attribute if dont want any url   src  data image gif base64 R0lGODlhAQABAAAAACwAAAAAAQABAAA

User · Answer

Building off of Ben Blank s answer  the only way that I got this to validate in the w3 validator was like so      lt img src       0  alt    gt

User · Answer

Simply  Like this    lt img id  give me src   gt

User · Answer

Use a truly blank  valid and highly compatible SVG  based on this article   src  data image svg xml charset utf8  3Csvg 20xmlns  http   www w3 org 2000 svg  3E 3C svg 3E   It will default in size to 300x150px as any SVG does  but you can work with that in your img element default styles  as you would possibly need in any case in the practical implementation

User · Answer

I haven t done this in a while  but I had to go through this same thing once    lt img src  about blank  alt      gt    Is my favorite - the    0 one implies that you ll try to make an HTTP HTTPS connection to the origin server on port zero  the tcpmux port   - which is probably harmless  but I d rather not do anyways  Heck  the browser may see the port zero and not even send a request  But I d still rather it not be specified that way when that s probably not what you mean   Anyways  the rendering of about blank is actually very fast in all browsers that I tested  I just threw it into the W3C validator and it didn t complain  so it might even be valid   Edit  Don t do that  it doesn t work on all browsers  it will show a  broken image  icon as pointed out in the comments for this answer   Use the  lt img src  data     solution below  Or if you don t care about validity  but still want to avoid superfluous requests to your server  you can do  lt img alt      gt  with no src attribute  But that is INVALID HTML so pick that carefully   Test Page showing a whole bunch of different methods  http   desk nu blank image php - served with all kinds of different doctypes and content-types  - as mentioned in the comments below  use Mark Ormston s  new test page at  http   memso com Test BlankImage html

User · Answer

I ve found that using    lt img src  file   null  gt    will not make a request and validates correctly   The browsers will simply block the access to the local file system   But there might be an error displayed in console log in Chrome for example   Not allowed to load local resource  file   null

User · Answer

lt img src  invis gif    gt    Where invis gif is a single pixel transparent gif  This won t break in future browser versions and has been working in legacy browsers since the  90s    png should work too but in my tests  the gif was 43 bytes and the png was 167 bytes so the gif won   p s  don t forget an alt tag  validators like them too

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

Examples related to html

Examples related to validation