设置用于测试的 img src 占位符

Question

有没有办法添加没有图像但带有占位符标签或属性的 img 标签，或者使用 css 出于测试目的：激活 javascript 或 css 等

Answer 1

您可以使用：https://placeholder.com/

只需输入尺寸即可。例如：https://via.placeholder.com/350x150

然后您可以添加 CSS 或使用 JS

对其进行操作

Answer 2

是的，这是可能的。这是一个例子：

(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" />

Answer 3

你可以使用base64图片

请通过以下链接了解更多信息，并查看代码片段

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,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#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 />

设置用于测试的 img src 占位符

Set an img src placeholder for testing

html

imgsource