Set an img src placeholder for testing

Question

Is there a way to add an img tag without an image, but with a placeholder tag or attribute, or using css for testing purposes: activate javascript or css etc.

Possible duplicate of [Image Placeholder](https://stackoverflow.com/questions/8987428/image-placeholder) — Jay Blanchard, Oct 17 '18 at 14:09
Folks this question is very broad and has duplicates. It should be closed. — Jay Blanchard, Oct 17 '18 at 14:10
@JayBlanchard why? its a very case specific question and not the same as the question you pointed out to — Guy Louzon, Oct 17 '18 at 14:28
Because it doesn't include an MCVE, doesn't demonstrate any effort and can be answered multiple ways. [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. — Jay Blanchard, Oct 17 '18 at 14:37
It a one line of code question, what's the point of writing with no end. The solution I expected, and received was literally a few lines. Is the any other way than a base 64 string? — Guy Louzon, Oct 17 '18 at 14:41
Yes - there are two more examples in answer below. You make a clarification in your comments on those answers, which means the question here is not complete. — Jay Blanchard, Oct 17 '18 at 14:44
@JayBlanchard after the 1st clarification I rewrote my question. and the answers given do not really answer my question... — Guy Louzon, Oct 17 '18 at 14:45
If you think the question is not too broad, the you can take it up on http://meta.stackoverflow.com. Make sure to include a link back to your question so others can see it to make that determination. Then come back here and include a link to your question on Meta. — Jay Blanchard, Oct 17 '18 at 14:49

Dhaval Pankhaniya · Accepted Answer · 2018-10-17T14:33:28.853

You can use base64 image

please go through following links for more information and also check code snipet

Codepen Demo

base 64 tutorial

body {
  background-color: #efefef;
  padding: 10px;
}

div#thumbnail-frame {
  border: 1px solid #999;
  border-radius: 10px;
  float: left;
  margin-right: 10px;
  padding: 1px;
}
img{
content:url('data:image/png;base64,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')
}
div#thumbnail {
 border-radius: 10px;
  height: 167px;
  width: 250px;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAMFBMVEXMzMz////Jycn4+Pj8/Pz19fXs7OzS0tLW1tbo6Ojf39/Ozs7x8fHw8PDT09Pl5eUgI1BXAAAFd0lEQVR4nO2b2XarMAxFiRlCIAn//7e3TZFkS7YTBGlz1zr7pSmD8caWBzBNAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AGEENa/h6SVY8ux6TnPE3p2QAjjcmu7L9p+mOadkuF2MnTtbRkbm/DZHhpze5wR2mTjYJNRR4x697x0yQH9uMsxDMUMm4RfM+yTjW3GMD1NGYbFptzfdziWDW3CHsPTbC45Vg3V6SuTX7FmeDotScIuQ10JTSElB8xpBS3l5DjDNdd7DE3WwrVsqEI0xl2KTwyTlsJl2JucqWIaS5np0gPPuw27fiW9j9G9cxmenrVXkWEUodfxuyeJm1V7q7YaXriDmqc4l3LvJG/XHEve8K4uOBUNo1Ppvoao5Zn2G+azIfVUDPN9v87mDyoQTViIoRRhVHEkvUzH4zdsQlRheKMY2i4gk6OVqzLUreVoz0zatzlzLw4wjNt0LoRtht0az126nxJhHc63qCSNSrhkxXcbRve69xm2NB5MG0Gq/5xvMpTIUG2KmB9sKIVIPhvLkHKc9GR0Pd4rhlyqUyFFXzUtGkY+o9nykiEdnlQu6tNvxlCGM6rnk3uts7jTUMYXFIgbDQP/iHdTmsaQ2zbTZvIeV5dYMeRIuToN6VdcJpTbuzaUkjITLg7ErnJdhyG3CVwIWw0pz1Fc0bauMYacETMCDaX6u9fwroW2GlJ5Dbb/7oMxLLcnMlb3NDUVQ9M/bTWkBOLAWotjsYblgpI8euZQFUOZBIw+Q/4pe6lejMZwLideCdF9htKYTk5DaqtkYEZewRhyTHQ2TT7WM6qpGUoXHFyG3HBy0vTcq7eG5c5iZ3dRM+THcIs2zM0tMoazzljgMDSGpTFbYtgdbKgDXAyHi2HQbeJXbvi3HveNzSZDvvDbDC/aMMeUMdSBSBqzMQy1WBPD7YJVQx7UDE5Drl5rJaCLfRWTMeT2MmNYaWf/2rA5sdJjX8uXKhtmeoQPNgxqFixSH2Z4cxumgUiVdnYbOgamb66l5PEIRErwu85+WBn6DZNZMO26/AeG5/lsmHOGHIghyui306a29KXBlMew3B++OGqL0vgOIArDJmfI/18rhkf3h+UxzcuGTfQ4iorpMfDcNKaRUfnBYxqeeO4wpJr5VdEpvWGz4dvGpfrxnseQArGVYfcjtcrcwqb5rrlF06pMuAwlEO/8K2dYmR9Wx6y7DPfO8R//SyCuv37mfx8xx9/9nCZJZaArDXnDv3hOI/Hd7DCknLdJGGYMK8/adj3WrzwR5jzQcwWfIQdiUkTWsFxQ73peKntuuwzVy6a1qbSG5UGNdPjHPvOWO+d9b6HPejAocfvewnR673pvIY+8ne+e1vTUS18aoG9498Tj42PfPUm63veHZJiunKMBeu39ocqJ7pePMuQ88VDYaZgsvrBbn74Dlst6irD8Hl+WTPCrI59hGoi3omHU/yYLVGyLd4hhfON5u9MwWQQ1lQ2lmiYTKPsu+gDD0EgQRt3TtvU0bJgEIhVPxjBaTxN3iRyFh62nmefxEt31aCAshl2On7xmDKPFiLIxYxgtxSHFQ9dESU4TonW0T9a1lQyjfkdCKWf47nVteeL64jWMFgVPVcM3r018Kug3lBWl3EpmDf9gfWmarNuQA1GCOm/422uEB7Ve32so8SXdQMHwN9d5t4v50MFtyD3i8tzw+LX6l1bT98MynjOfepzNoQndj+GNkon613VbFw1WJjpNrbA9/HuLwncwW45VJ+XSyCVbvtSx38x8KOHA754AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAf8w/w0DlHWP1/WgAAAABJRU5ErkJggg==');
}

<div id="thumbnail-frame">
  <div id="thumbnail"></div>
</div>

<img />

score 0 · Answer 2 · answered Oct 17 '18 at 13:56

0

You can use: https://placeholder.com/

Simply enter the dimensions and you will be good to go. Eg: https://via.placeholder.com/350x150

You can then add CSS or manipulate this with JS

answered Oct 17 '18 at 13:56

alpharomeo

418
5
13

thanks for the answer, but I was wondering if there a independent html solution – Guy Louzon Oct 17 '18 at 14:01
2

Are you referring to a base64 image? @Dhaval has given you an example. If I have misunderstood - please help in stating what "independent html" means? – alpharomeo Oct 17 '18 at 14:14

score 0 · Answer 3 · answered Oct 17 '18 at 14:02

0

Yes, it is possible. Here is an example:

(function($) {
    $(document).ready(function() {
        $('#path').change(function() {
            $('#img').attr('src', $(this).val());
        });
    });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Image path: <input id="path" value="https://www.chatelaine.com/wp-content/uploads/2018/10/Black-Panther-chadwick-boseman-e1539272923602-810x608-1539273014.jpg" />
<img src="" alt="Image not loaded" id="img" />

answered Oct 17 '18 at 14:02

Sergej

2,030
1
18
28

thanks for the answer, but I was wondering if there a independent html solution – Guy Louzon Oct 17 '18 at 14:03
sorry, then I do not understand what you need. – Sergej Oct 17 '18 at 14:03

Set an img src placeholder for testing

3 Answers3