图像占位符

Question

我已经使用背景颜色定义了图像标记,这样如果没有图像,颜色应该显示但仍然是破碎的图像图标显示如何删除它？

我不想通过添加jquery或任何框架使页面笨重,我也不能添加任何类型的div到图像,因为该网站几乎完成.

只用javascript找到答案

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>

Answer 1

你可以使用以下隐藏:

<img
  src="my.png"
  onerror="this.style.display='none'"
/>

如果未找到图像,则可以显示另一张图像:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

Answer 2

1x1空png的解决方案

        function ImgError(source){
            empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
            source.src = "data:image/png;base64," + empty1x1png;
            source.onerror = "";
            return true;
        }

        <img src="someimage.png" onerror="ImgError(this);"/>