为什么Vue.js中img标签src属性绑定变量无法正常渲染图片？

@是Webpack、Vite等前端构建工具提供的路径别名，仅对代码中硬编码的静态路径生效：构建阶段会自动将@/assets/xxx.png这类写死的路径替换为打包后真实可访问的资源地址。
而你通过:src动态拼接的路径是运行时才生成的，构建工具无法提前识别到该路径需要做资源解析处理，浏览器最终拿到的是未被转换的、带@的原始字符串路径，自然无法加载到对应图片。你在审查元素时看到的只是你拼接的字符串，并不是真实可访问的资源地址。

根据你使用的构建工具选择对应修改方式即可：

Webpack 场景（Vue CLI 创建的项目默认用Webpack） #

手动用require包裹动态拼接的路径，主动告诉构建工具需要解析该资源，注意固定路径前缀必须写死在require参数里：

<template>
    <div>
        <img class="rotate" alt="Vue logo" :src="imgSrc" />
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },
    computed: {
        imgSrc() {
            return require(`@/assets/${this.filename}`)
        }
    }
}
</script>

Vite 场景 #

Vite 不支持require语法，需要用new URL处理动态资源路径：

<template>
    <div>
        <img class="rotate" alt="Vue logo" :src="imgSrc" />
    </div>
</template>

<script>
export default {
    name: "RotatingImage",
    props: {
        filename: String
    },
    computed: {
        imgSrc() {
            return new URL(`/src/assets/${this.filename}`, import.meta.url).href
        }
    }
}
</script>

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