vue3 中使用element UI 的图片组件＜el-image＞

官方文档   

环境配置   vue3 中使用 element UI 3 （vite 和 webpack）_qq_48557089的博客-CSDN博客

加载失败

可通过slot = error可自定义加载失败内容

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup

import { ref } from "@vue/reactivity";

const src = ref('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg')
</script>

<template>
  /*变量src----图片加载成功的链接*/
  <el-image :src="src">
    <template #error>
      <div class="image-slot">
        /*图片加载失败显示的内容*/
        <img src="../../assets/image/member_slices/Bubble.png">
      </div>
    </template>
  </el-image>
</template>