Vue中如何拼接属性与字符串实现图片路径绑定？

问题原因 #

@/assets/xxx 是webpack/Vite的路径别名，只有在静态字符串中才会被解析为实际的资源路径。直接动态拼接的字符串不会被构建工具识别，导致图片无法加载。同时Vue模板中不能直接在属性值里用{{}}插值，必须通过v-bind（简写:src）绑定动态值。

有效解决方案 #

1. 模板中直接用require()绑定（适用于Vue2/Webpack环境）

通过require()主动让webpack解析动态路径，注意路径需要保留部分静态前缀，不能全动态：

<script>
export default {
  props: {
    id: String
  }
}
</script>

<template>
  <!-- 用:src绑定，require包裹动态拼接的路径 -->
  <img :src="require(`@/assets/covers/${id}.jpg`)" width="240" height="180" />
  <h1>@/assets/covers/{{id}}.jpg</h1>
</template>

2. 用computed计算属性生成路径（推荐）

computed会自动监听props的变化，比data更适合处理依赖props的动态路径：

<script>
export default {
  props: {
    id: String
  },
  computed: {
    imgUrl() {
      return require(`@/assets/covers/${this.id}.jpg`)
    }
  }
}
</script>

<template>
  <img :src="imgUrl" width="240" height="180" />
  <h1>{{imgUrl}}</h1>
</template>

3. Vue3/Vite环境用new URL()

如果是Vite搭建的项目，可通过new URL()结合import.meta.url生成资源路径：

<script setup>
const props = defineProps({
  id: String
})
const imgUrl = new URL(`../assets/covers/${props.id}.jpg`, import.meta.url).href
</script>

<template>
  <img :src="imgUrl" width="240" height="180" />
</template>

你之前写法的问题 #

• 直接在src中写{{id}}：Vue不允许属性值内用{{}}插值，必须用:src绑定。
• 字符串拼接/模板字符串未加:src：会被当成静态文本，不会解析变量。
• data中预拼接路径：初始化时props可能未赋值，且纯字符串不会被构建工具解析为资源路径。

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