vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等

该博客展示了在前端如何处理图片加载失败的情况，提供了一种使用默认图片的解决方案，并介绍了Element UI的el-image组件实现图片懒加载、大图预览、加载占位符和加载失败时的自定义显示。示例代码包括了错误图片的替换和自定义加载状态的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <d2-container>
    <h3>image加载失败使用默认图片</h3>
    <img src=""
         alt="test1.png"
         :onerror="errorImg" />
    <hr>

    <h3>el-image懒加载、大图预览、加载占位、加载失败、</h3>
    <div class="demo-image-error">
      <div class="block">
        <span class="demonstration">默认</span>
        <el-image :src="url"
                  :preview-src-list="srcList"
                  lazy></el-image>
        <!-- 可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载 -->
      </div>
      <div class="block">
        <span class="demonstration">自定义</span>
        <el-image src="">
          <div slot="placeholder">
            加载中
            <span class="dot">...</span>
          </div>
          <div slot="error">
            <i class="el-icon-picture-outline"></i>
            加载失败
          </div>
        </el-image>
      </div>
    </div>
  </d2-container>
</template>

<style lang="scss" scoped>
img {
  width: 300px;
  height: 100px;
}
.demo-image-error {
  .block {
    display: inline-block;
    width: 200px;
    height: 250px;
    text-align: center;
    > span {
      display: block;
      width: 100%;
    }
    .el-image {
      width: 200px;
      height: 200px;
      line-height: 200px;
      border: 1px solid lightgray;
    }
  }
}
</style>

<script>
import errorPhoto from '@/assets/img/sbpmt1.png'
export default {
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      errorImg: 'this.src="' + errorPhoto + '"',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ]
    }
  }
}
</script>