前端的图片标签如何设置备用地址，一行代码实现

前端的图片标签如何设置两个地址？如果前者存在就用前者，否则用后者？

在前端开发中，处理图片加载失败的情况是一个常见的需求。我们可以通过简单的 HTML 代码实现这一功能。 下面是一个示例， 展示了如何设置图片标签的 src 属性，使其在前者地址无效时自动切换到备用地址。

<img src="http://statics.imgkits.com/test11231023u1283123.png" 
     onerror="this.src='http://statics.imgkits.com/test.png'; this.onerror=null;" 
     alt="转存失败，建议直接上传图片文件">

代码解析

• src 属性：这是主图片地址。如果这个地址有效，浏览器将加载并显示该图片。
• onerror 事件：当图片加载失败时，会触发这个事件。我们在这里设置了备用图片的 URL。
  • this.src='http://statics.imgkits.com/test.png'：这行代码会将 src 属性更改为备用地址。
  • this.onerror=null：为了避免在备用图片加载失败时再次触发同样的错误处理，这行代码会移除 onerror 事件。

使用场景

这种方法非常适合于以下场景：

• 动态内容：当图片 URL 可能会变化时，确保用户体验不受影响。
• 外部资源：当图片来自外部服务器，可能会因为网络问题而无法加载。

通过这种方式，我们可以确保在图片加载失败时，用户依然能够看到相关内容，提高了页面的友好性和可用性。