为何vue3的vue-router中的RouterLink包裹的element-plus的el-image会在鼠标悬浮在图片的时候在图片底部多出部分颜色块？

Question

为何vue3的vue-router中的RouterLink包裹的element-plus的el-image会在鼠标悬浮在图片的时候在图片底部多出部分颜色块

我把代码编译并发布了，这是问题的在线演示，看看能不能从devTools调好问题。

Element Plus版本2.9.2，Vue版本3.5.13，开发模式：本地开发（npm run dev）。

以下为鼠标悬浮在图片上的截图（鼠标不悬浮在图片上时候没有底部的颜色块，鼠标悬浮在图片上就出现了底部的颜色块）

以下为代码

<el-row :gutter="20">
  <el-col :span="12" :offset="6" style="text-align: center;">
    <RouterLink to="/">
      <el-image src="https://cdn.pixabay.com/photo/2023/06/26/21/22/shack-8090832_1280.jpg" style="width: 100px; height: 100px;"/>
    </RouterLink>
  </el-col>
</el-row>

尝试过vue-router中的RouterLink包裹的element-plus的el-image换成image

可是图片不见了，附加期望:vue-router中的RouterLink包裹的el-image换成image后图片可见，主要期望：鼠标悬浮在图片上时在图片底部不显示多余的颜色块。

以下为代码

<el-row :gutter="20">
  <el-col :span="12" :offset="6" style="text-align: center;">
    <RouterLink to="/">
      <image src="https://cdn.pixabay.com/photo/2023/06/26/21/22/shack-8090832_1280.jpg" style="width: 100px; height: 100px;"/>
    </RouterLink>
  </el-col>
</el-row>

尝试过a标签包裹element-plus的el-image

同样存在多余的颜色块，期望不存在多余的颜色块。

以下为代码

<el-row :gutter="20">
  <el-col :span="12" :offset="6" style="text-align: center;">
    <a to="/">
      <el-image src="https://cdn.pixabay.com/photo/2023/06/26/21/22/shack-8090832_1280.jpg" style="width: 100px; height: 100px;"/>
    </a>
  </el-col>
</el-row>

尝试过a标签包裹image

可是图片不见了，期望图片可见。

以下为代码

<el-row :gutter="20">
  <el-col :span="12" :offset="6" style="text-align: center;">
    <a href="#">
      <image src="https://cdn.pixabay.com/photo/2023/06/26/21/22/shack-8090832_1280.jpg" style="width: 100px; height: 100px;"/>
    </a>
  </el-col>
</el-row>

Answer 1

你给了最小复现不就简单了。

可以检查一下这个样式是哪里加的。

Answer 2

经常会在 <a> 标签中看到类似的问题，以前的解决方案就是给 <a> 标签设置 font-size:0 的样式。
router-link 在最后就会被替换成 <a> 标签。

现在好像有其他的解决方案了，但是一下次没想起来，可以按照上面的思路顺着找找看。

---

以下是一个在线的示意Demo，使用 a 标签替代了 router-linke 标签。
🔗 Element Plus Playground

<template>
  <el-row :gutter="20">
    <el-col :span="12" :offset="6" style="text-align: center;">
      <a href="/">
        <el-image
          src="https://cdn.pixabay.com/photo/2023/06/26/21/22/shack-8090832_1280.jpg"
          style="width: 100px; height: 100px;"
        />
      </a>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
</script>

<style>
a {
  /* 取消注释查看效果 */
  /* font-size: 0; */
  background: red;
}
</style>