补充默认头像svg、添加加载失败图片显示（demo/list）

long

2022-02-28 fd98d3d9d49fad8d7244cae8de2264a635fe9f69

补充默认头像svg、添加加载失败图片显示（demo/list）

 src/icons/svg/avatar.svg

New file
@@ -0,0 +1,2 @@

<svg t="1646034217365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2353" width="60" height="60"><path d="M512 73.142857c242.358857 0 438.857143 196.498286 438.857143 438.857143s-196.498286 438.857143-438.857143 438.857143S73.142857 754.358857 73.142857 512 269.641143 73.142857 512 73.142857m0-73.142857C229.229714 0 0 229.229714 0 512s229.229714 512 512 512 512-229.229714 512-512S794.770286 0 512 0z" p-id="2354"></path><path d="M659.748571 548.571429H369.371429c-81.371429 1.097143-146.688 74.605714-146.285715 164.608v148.406857c165.558857 167.789714 419.620571 167.789714 585.142857 0v-149.613715c0.402286-43.593143-15.140571-85.577143-43.081142-116.297142-27.977143-30.756571-65.974857-47.725714-105.398858-47.067429z" p-id="2355"></path><path d="M515.657143 338.651429m-146.285714 0a146.285714 146.285714 0 1 0 292.571428 0 146.285714 146.285714 0 1 0-292.571428 0Z" p-id="2356"></path></svg>

 src/pages/demo/list.vue

@@ -72,11 +72,22 @@
        <template slot-scope="scope">
          <el-image :src="scope.row.headImg" style="width:50px;height:50px;" fit="contain" :preview-src-list="[scope.row.headImg]">
            <div slot="error" class="image-slot">
              <!-- 默认头像 -->
              <svg-icon icon-class="avatar" style="width:50px;height:50px;" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="图片" prop="headImg" align="center" min-width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.headImg" style="width:50px;height:50px;" fit="contain" :preview-src-list="[scope.row.headImg]">
            <div slot="error" class="image-slot">
              <!-- 图片显示失败图标 -->
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:50px;height:50px;">
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
      <el-table-column label="单行省略" show-overflow-tooltip prop="adviceInfo" align="center" min-width="120" />
      <el-table-column label="多行省略" prop="adviceInfo" align="center" min-width="160">

 src/pages/system/banner.vue

@@ -19,7 +19,12 @@
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column label="图片" prop="imgUrl" align="center" min-width="120">
        <template slot-scope="scope">
          <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" />
          <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]">
            <div slot="error" class="image-slot">
              <!-- 图片显示失败图标 -->
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:80px;height:80px">
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="jumpType" label="跳转类型" align="center" min-width="120">