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

谁借莪１个温暖的怀抱￠ 2021-07-26 12:00 2820阅读 0赞

<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>
            
          </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>