VueJs绑定API返回的图片路径正确但图片无法显示如何解决

Vue 项目基于 webpack/vite 构建时，assets 目录下的资源会被构建工具统一处理：生产打包时资源文件名会加哈希后缀，且纯字符串动态拼接的路径不会被构建工具识别，对应图片不会被纳入打包产物，所以哪怕浏览器端显示的路径逻辑正确，也无法加载到资源。

方案1：资源移入public目录（优先推荐） #

public 目录下的资源不会被构建工具编译，会原样复制到打包后的根目录，适配动态路径引用场景：

• 把原 assets 下的 images 文件夹整体移动到项目根目录的 public 文件夹下
• 代码修改为：

<img :src="`/images/${nation.drapeau}`"/>

方案2：保留assets路径，使用动态导入 #

如果不想改动现有资源位置，可通过动态导入语法让构建工具识别资源：

• webpack 项目写法：

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

• vite 项目写法：

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

注意：导入语句内必须包含固定的路径前缀，不能完全使用变量，否则构建工具依然无法检索到对应资源。

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