Vue3无法动态绑定图片问题

一、问题描述

今天写代码时发现<img>标签无法动态绑定图片

我的目录结构如下：

这两句代码可以正常运行：

<img src="../../assets/images/banner.png" style="height: 100px;width: 100px;">
<img src="@/assets/images/banner.png" style="height: 100px;width: 100px;">

可见我的路径没有问题，因此我把它改为动态路径：

<template>
  <div >
    <img :src="url" style="height: 100px;width: 100px;">
  </div>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('../../assets/images/banner.png')
</script>

<style scoped>

</style>

这时候就不行了，只能显示个图片的框架，而图片没有出来

二、问题分析

我们打开F12，点击Network部分，可见图片是存在的：

路径“@/assets/images/banner.png”的信息：

状态码为304，路径不正确

路径“../../assets/images/banner.png”的信息：

状态码200，路径不正确

而正确的信息为：

状态码为304，路径为“http://localhost:5173/src/assets/images/banner.png”

对比可见：

正确路径里面多了一个src，而其他两个写法都没有

因此是路径解析问题，但是前端和后端都没有报错，非常奇怪，现在问题已经解决了

三、解决办法

把相对路径改为以src开头的格式即可，新的代码如下：

<template>
  <div >
    <img :src="url" style="height: 100px;width: 100px;">
  </div>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('src/assets/images/banner.png')
</script>

<style scoped>

</style>

如果有帮到你，请帮我点个赞，让更多人看到

谢谢