源码：image.png

    1.  <img :src="图片路径" alt="商品图" loading="lazy" @click="onPreview" />
    2.    //loading="lazy"  需看看浏览器是否支持
    3.  <el-image
    4.      :lazy="true"
    5.      :src="图片路径"
    6.  >
    7.  </el-image>

    如何判断当前浏览器是否支持loading=”lazy”？

    1. 下面三种方法都可以：
    2. var isSupportLoading = 'loading' in document.createElement('img');
    3. 或者：
    4. var isSupportLoading = 'loading' in new Image();
    5. 或者：
    6. var isSupportLoading = 'loading' in HTMLImageElement.prototype;

    image.png
    在接口正常返回数据的情况下，从图片看el-image会加载两张，而原生img标签则加载一张，测试同一张图片原生img加载更快，且无出现加载失败的情况。

    查看资料也有以下情况：
    ①el-image 一旦初始化加载失败的话，后期更新是不会出图片的。
    解决方案：要么一开始在标签 el-image 里添加 “:lazy=’true’”，要么在 “:src” 里添加默认图片地址，避免渲染DOM的时候找不到地址导致报错。
    ②引入图片的问题

    1. <el-image
    2.     src="../assets/logo1.png"
    3. />

    解决方案：src用里面加个require

    1. <el-image
    2.     :src="require('../assets/logo1.png')"
    3. />

    ③调用 element-ui 中的 标签，可通过slot = error可自定义加载失败内容

    1. <el-image :src="图片路径" :preview-src-list="srcList">
    2.      <div slot="error">
    3.           <i class="el-icon-picture-outline"></i>
    4.      </div>
    5. </el-image>

    推荐文章：浏览器IMG图片原生懒加载loading=”lazy”实践指南
    https://www.zhangxinxu.com/wordpress/2019/09/native-img-loading-lazy/