vue+Element Plus

Question

使用vue+Element Plus
后台传来的图片地址如果是完整的没问题！
但是如果仅传路径过来为什么会自动补http://localhost:5173

<el-table-column prop="image" label="礼物图标">
          <template v-slot="scope">
            <div>{{ scope.row.image }}</div>
            <img :src="scope.row.image"  style="width: 40px; height: 40px"/>
          </template>
</el-table-column>

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7530893
• 这篇博客也不错, 你可以看下基于Vue+Element Plus实现快速导航
• 您还可以看一下 徐鹏飞老师的Vue + Element UI从头搭建企业级后台管理页面框架课程中的 31_解决刷新或打开新Tab页菜单数据丢失问题小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue+element实现非固定行列表格中的 vue+element实现非固定行列表格 部分也许能够解决你的问题。
• 以下回答由chatgpt基于相关博客总结生成:

  问题描述及分析： 1. 问题背景：使用vue和Element Plus时，后台传来的图片地址在显示的时候会自动补充"http://localhost:5173"，导致图片无法正常显示。 2. 问题原因：在Vue中，图片地址如果是以 "/" 或者 "http://" 开头，则会以绝对路径的方式加载；如果是其他非 "/" 或者 "http://" 开头的路径，则会以相对路径的方式加载，并在路径前面加上当前页面的BaseUrl。 3. 解决方案：需要根据传来的图片地址判断其是否为绝对路径，如果不是绝对路径，则手动添加BaseUrl。

  解决方案如下：

  ```html
  <el-table-column prop="image" label="礼物图标">
      <template v-slot:scope>
          <div>{{ scope.row.image }}</div>
          <img :src="formatImageUrl(scope.row.image)" style="width: 40px; height: 40px"/>
      </template>
  </el-table-column>
  

  methods: {
      formatImageUrl(imageUrl) {
          if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
              return imageUrl;
          } else {
              return 'http://localhost:5173' + imageUrl;
          }
      }
  }
  

  这里通过添加一个formatImageUrl方法，在模板中调用该方法来处理图片地址。在formatImageUrl方法中判断传入的图片地址是否以"http://"或"https://"开头，如果是则直接返回该地址，否则在地址前添加"http://localhost:5173"后返回。

  这样就可以解决后台传来的图片路径问题，无论是绝对路径还是相对路径都能正常显示了。 ```

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^