如果找不到原始图像,如何在HTML中创建占位符图像？

Question

基本上标题是什么.

我正在制作一个html页面,并使用图像进行链接.但是,如果找不到指定的文件,我可以将图像显示为默认图标吗？

Answer 1

你必须使用javascript:

<img src="404image" onerror="this.src='images/not_found.png';" />

Answer 2

如果在css中指定图像的宽度和高度,则可以将背景图像设置为未找到的图像:

img {
  width:100px;
  height:100px;
  background: url(http://goo.gl/vyAs27) no-repeat scroll 0 0;
}

<img src="not-found.png" /><img src="http://goo.gl/ijai22" />

大多数浏览器会在角落插入缺少图标的图像.我不知道要删除它.

如您所见,您的常规图像将覆盖背景图像.

如果您的图像具有透明背景,则背景图像将在加载的图像后面可见.

或者,使用服务器端编程语言检查图像是否存在.如果没有,请加载占位符...