Blog Detail

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

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

    1. 使用 onerror 属性:

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

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

    2. 使用 元素和 元素 (推荐):

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

    Default Image

    在这个例子中，浏览器会优先尝试加载 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';

    };

    My Image

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

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

    总结:

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

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