Vue3 + Vite项目中v-bind绑定img src失败求助

问题原因 #

直接在data里写@/assets/xxx字符串时，Vite不会自动解析@路径别名，浏览器会把它当作根目录下的路径去请求，导致资源找不到。而静态src属性会被Vue模板编译器结合Vite的资源处理逻辑自动解析，所以能正常加载。

解决方案 #

方法1：使用new URL()（Vite官方推荐） #

借助import.meta.url构建正确的资源URL：

<template>
  <img :src="ImgUrl">
</template>
<script>
export default {
  name: 'Image',
  data() {
    return {
      ImgUrl: new URL('@/assets/images/pics/cover_info.jpeg', import.meta.url).href
    };
  }
};
</script>

方法2：直接导入图片资源 #

把图片当作模块导入，Vite会自动处理资源路径：

<template>
  <img :src="ImgUrl">
</template>
<script>
import coverInfoImg from '@/assets/images/pics/cover_info.jpeg'

export default {
  name: 'Image',
  data() {
    return {
      ImgUrl: coverInfoImg
    };
  }
};
</script>

方法3：使用计算属性（适合动态路径场景） #

如果需要根据逻辑动态生成图片路径，用计算属性处理更灵活：

<template>
  <img :src="ImgUrl">
</template>
<script>
export default {
  name: 'Image',
  computed: {
    ImgUrl() {
      // 可根据业务逻辑动态拼接路径
      return new URL('@/assets/images/pics/cover_info.jpeg', import.meta.url).href
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Rduan