Vue 3中如何为img的src绑定动态名称的本地图片文件

核心原因 #

Vue配套的打包工具（Vite/Webpack）只会对静态写死的src路径做资源预处理：public目录的路径会直接映射到部署根路径，assets目录的资源会被编译加哈希、转base64等。动态拼接的字符串路径不会被预处理，所以运行时路径和打包后的实际资源路径不匹配，导致加载失败。

解决方案分两种场景 #

场景1：图片存放在public目录 #

public目录的资源会被原封不动复制到打包后的根路径，不需要加任何前缀，直接拼接文件名即可：

<!-- 假设product.img为图片文件名，如goods.png -->
<img :src="`/${product.img}`" />

场景2：图片存放在src/assets目录 #

assets下的资源会被打包工具编译处理，动态引用需要用对应的工具语法让打包工具识别资源：

• Vite环境适用写法

<img :src="new URL(`../assets/${product.img}`, import.meta.url).href" />

• Webpack环境（Vue2/旧版Vue CLI）适用写法

<img :src="require(`../assets/${product.img}`)" />

• 兼容性最优写法（所有环境通用）

提前把所有需要动态引用的图片导入，用映射表匹配使用：

// script中提前导入资源
import goods1 from '../assets/goods1.png'
import goods2 from '../assets/goods2.png'

const imgMap = {
  'goods1.png': goods1,
  'goods2.png': goods2
}

<!-- 模板中直接读取映射表 -->
<img :src="imgMap[product.img]" />

之前写法错误原因 #

• :src="'@/public/' + product.img"：@别名默认指向src目录，public和src平级，路径本身不存在，且动态拼接的别名不会被解析
• :src="'/../../public/'+ product.img"：public目录资源不会被编译到src对应的嵌套路径下，打包后无此相对路径
• :src="'../assets/'+ product.img"：动态拼接的路径不会被打包工具的资源加载器识别，未做编译转换，和打包后实际路径不匹配

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