element-plus的el-image设置error属性后占位图没显示怎么办

这个问题我也遇到过。element-plus 的 el-image 组件在图片加载失败时，默认情况下是会显示一个空白，而不会自动显示你通过 error 属性设置的占位图。

你遇到的情况，很可能是因为 el-image 的 error 插槽没有正确处理。单纯传一个路径字符串是不够的，error 属性其实是要绑定一个 Vue 插槽的，而不是一个字符串路径。

你原来的写法：

<el-image

  :src="imgUrl"

  :error="errorImgPath"

  style="width: 200px; height: 200px;"

></el-image>

这样写确实看起来没错，但其实 error 属性不能直接传路径字符串，而是应该配合一个 Vue 插槽来使用。你可以这样改：

<el-image

  :src="imgUrl"

  style="width: 200px; height: 200px;"

>

  <template #error>

    <div class="image-slot">

      <img :src="errorImgPath" alt="占位图" />

    </div>

  </template>

</el-image>

然后你的 JS 里正常定义 errorImgPath 就行：

data() {

  return {

    imgUrl: '真实图片地址',

    errorImgPath: '占位图地址'

  }

}

我当时也卡在这，以为 error 属性可以直接传图片路径，结果调试了半天才发现文档里提了一句要用插槽。现在 el-image 的 error 插槽是必须的，不是可选的。

如果你用的是较新的 element-plus 版本，官方推荐的用法就是插槽，单纯的 error 属性传字符串已经不生效了。可以试试上面的方法，应该就能正常显示占位图了。

这个问题其实是对 el-image 组件的 error 属性理解有偏差。error 并不是直接用来传占位图路径的，它是一个回调函数，当图片加载失败时会触发这个函数。你需要在 error 的回调函数里手动设置一个默认的占位图。

### 解决方案步骤

#### 1. 理解 error 属性的作用
error 是一个函数，而不是直接传图片路径的地方。所以你之前写的 :error="errorImgPath" 或者 :error="errorImgPath()" 都不对。我们需要定义一个函数，在这个函数里处理图片加载失败的情况。

#### 2. 使用一个默认占位图
首先准备一张默认的占位图，确保它的路径是正确的。比如你可以放一张图片在你的项目静态资源文件夹里（假设是 /src/assets/placeholder.png）。

#### 3. 编写代码
下面是一个完整的解决方案：

<template>

  <el-image

    :src="imgUrl"

    @error="handleError"

    style="width: 200px; height: 200px;"

  ></el-image>

</template>



<script>

export default {

  data() {

    return {

      // 原始图片路径

      imgUrl: 'https://example.com/some-broken-image.jpg',

      // 默认占位图路径

      errorImgPath: require('@/assets/placeholder.png') // 确保路径正确

    };

  },

  methods: {

    // 图片加载失败时的回调函数

    handleError() {

      // 返回占位图路径

      return this.errorImgPath;

    }

  }

};

</script>

#### 4. 代码解释
- @error="handleError"：监听图片加载失败事件，调用自定义的 handleError 方法。
- 在 handleError 方法里返回默认的占位图路径。
- 使用了 Vue 的 require 来引入静态资源路径，确保路径不会有问题。如果你直接用相对路径或者静态路径，可能会遇到路径解析错误。

#### 5. 注意事项
- 如果你在使用 Vue CLI 构建工具，记得把占位图放在 /public 文件夹下或者通过 require 引入到项目中。
- error 属性是个函数，不要试图直接传字符串进去，这是很多人容易犯的错。

好了，按照这个方法改一下代码，应该就能正常显示占位图了。如果还有问题，可能是你的占位图路径有问题，仔细检查一下路径是否正确。