HTML 图片不存在则显示一个默认图片

在网页设计中，HTML（超文本标记语言）用于构建页面结构和内容。有时，我们可能会遇到图片资源因各种原因无法加载的情况，例如URL错误、图片已删除或网络问题。为了解决这个问题，开发者通常会使用一种技巧，即当指定的图片不存在时，显示一个默认的占位图片。这个技术可以通过HTML的`<img>`标签和`onerror`事件属性来实现。 我们来看`<img>`标签的基本结构： ```html <img src="image-url" alt="替代文本"> ``` 这里的`src`属性定义了图片的URL，而`alt`属性提供了图片的替代文本，当图片无法显示时，浏览器会显示这个文本。 为了在图片加载失败时显示默认图片，我们可以利用`onerror`事件属性。当图片加载发生错误时，浏览器会触发`onerror`事件。我们可以为这个事件绑定一个处理函数，该函数在执行时会替换图片的`src`属性，使其指向默认图片。下面是一个例子： ```html <img src="original-image-url" alt="图片描述" onerror="this.src='default-image-url'; this.onerror=null;"> ``` 在这个示例中，如果`original-image-url`的图片加载失败，`onerror`事件就会触发，执行JavaScript代码将`src`属性更改为`default-image-url`，从而显示默认图片。同时，`this.onerror=null;`是为了防止事件无限循环，因为如果默认图片也加载失败，我们不希望再触发`onerror`事件。 在实际应用中，`default-image-url`可以是服务器上的一个静态资源，也可以是数据URI（直接在HTML中嵌入的图片数据）。数据URI的好处是即使用户没有网络连接，也能看到默认图片，因为它已经包含在HTML文档中。例如： ```html <img src="original-image-url" alt="图片描述" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAEBAQEB/wSSxwAAAAd0SU1FB9oIBw8bG+ZP87IAAABSdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVD/2wCEAAkGBxMTEhUTExMWFhUXGB0dGBgYGCAcIBweHhwdGyAgGyAmHhoeHyAhISkiJyorLCwsLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGy0lICUtLS8vLy8tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABAUCAwYHBhL/xAA+EAABAwIEBAMGBQQDAQAAAAABAAIDBBEFEiEGMRNBUWEiMkJhFCNhkaHRBxRCUsHwYtFiYoKissHh8f/aAAwDAQACEQMRAD8A/8QfjIwMCAgIDAwMDAgIDBQQEBAcEAgMEAgQFBBESExQhIjFhIkJSYnGBkRQlNhkRQycnOhscHR4fDxESUkQmOjs8QVJTVXc4OiwhMkZMT1JnaXZ+gpKXm4+bo6enr7O3u8PHy8/T19vf4+fr7/P3//wCpACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAoACgAKgAo