img中的src加载失败时如何用默认图片来替换呢？

在前端开发中，当 <img> 元素的 src 属性指定的图片加载失败时，可以使用几种方法来替换为默认图片：

1. 使用 onerror 属性:

这是最直接和常用的方法。onerror 属性会在图片加载失败时触发一个 JavaScript 事件，你可以在这个事件中将 src 属性更改为默认图片的路径。

<img src="image.jpg" onerror="this.onerror=null; this.src='default.jpg'">

• this.onerror=null; 这行代码很重要，它可以防止无限循环的错误。如果默认图片也加载失败，onerror 事件会再次触发，如果没有这行代码，就会陷入无限循环。

2. 使用 <picture> 元素和 <source> 元素 (推荐):

<picture> 元素允许你定义多个图像源，浏览器会根据不同的条件选择最合适的源。这提供了更好的灵活性和控制，例如可以根据屏幕尺寸或设备类型来选择不同的图像。

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="default.jpg" alt="Default Image">
</picture>

在这个例子中，浏览器会优先尝试加载 image.webp，如果浏览器不支持 WebP 格式，则会尝试加载 image.jpg。如果这两个都加载失败，则会显示 default.jpg。

3. 使用 JavaScript:

你可以使用 JavaScript 来监听 img 元素的 onload 和 onerror 事件，并在 onerror 事件中替换图片。

const img = document.getElementById('myImage');
img.onload = function() {
  // 图片加载成功
};
img.onerror = function() {
  this.onerror=null; // 防止无限循环
  this.src = 'default.jpg';
};

<img id="myImage" src="image.jpg" alt="My Image">

4. CSS 的 object-fit 和 object-position 属性 (不完全替换，但可以改善体验):

虽然这不是直接替换图片，但可以利用 CSS 的 object-fit 和 object-position 属性来控制默认图片在容器中的显示方式，从而在一定程度上弥补原图加载失败带来的视觉缺陷。例如，你可以将默认图片设置为 cover 或 contain，使其填满或包含在 img 元素的容器中。

总结:

推荐使用 <picture> 元素，因为它提供了更好的灵活性和控制，并且可以根据不同的条件加载不同的图像。如果你的需求比较简单，onerror 属性也是一个不错的选择。 使用 JavaScript 可以实现更复杂的逻辑，例如根据不同的错误类型显示不同的默认图片。

哪种方法最适合你取决于你的具体需求和项目环境。 如果需要兼容性更好，onerror 属性是首选。 如果需要根据不同情况显示不同默认图片，或者需要更精细的控制，JavaScript 方法更合适。 <picture> 元素则提供了更现代化和灵活的解决方案，尤其在需要根据设备或网络条件提供不同图片格式时。