Elementui的image组件在页面刚请求数据时显示”加载失败“的解决方案

bug描述

进入页面时，el-image组件先展示“加载失败”，待数据加载后才展示页面

原因分析

进入页面时，el-image组件渲染时发现src是空值，所以显示 “加载失败”。

解决方案

为el-image组件加上 v-show。比较值是el-image组件绑定的初始化值。

例如：

data() {
    return  {
        form : {
            vinUrl: undefined
        }
    }
}

那么

v-show="form.vinUrl !== undefined"

优化方案

为图片添加加载中的占位

<el-image :src="form.vinUrl" v-show="form.vinUrl !== ''">
    <div
      slot="placeholder"
      class="flex justify-center items-center image-slot"
    >
      <em class="el-icon-loading mr-6"></em>加载中...
    </div>
</el-image>