Laravel 9（Vite）搭配Vue 2.7动态:src使用异常求助

问题原因 #

1. 直接用<img :src="../../assets/${path}">：Vite构建时无法识别动态拼接的资源路径，不会对这类路径做哈希后缀处理和资源映射，导致实际加载的路径和编译后的资源路径不匹配，图片无法显示。
2. 用require()：Vite采用ES模块规范，不支持CommonJS的require语法，因此会抛出“require is not defined”错误。

可行解决方案 #

方案1：将图片放到public目录，使用绝对路径 #

把需要动态加载的图片移到项目根目录的public文件夹下（比如public/images/），然后直接用绝对路径拼接：

<img :src="`/images/${path}`" >

这种方式无需Vite额外处理，直接访问静态资源目录的文件。

方案2：使用Vite的import.meta.glob预加载资源 #

通过import.meta.glob批量预加载指定目录下的图片，再动态获取对应资源的URL：

// 在Vue组件的script中
const imageMap = import.meta.glob('../../assets/*.{png,jpg,jpeg}', { 
  eager: true, 
  as: 'url' 
})

const getImageUrl = (fileName) => {
  const resourceKey = `../../assets/${fileName}`
  return imageMap[resourceKey] || ''
}

模板中调用方法：

<img :src="getImageUrl(path)" >

注意：根据实际图片格式调整glob匹配规则（比如*.{png,jpg}），确保覆盖你的图片类型。

方案3：使用new URL构造资源路径（Vite官方推荐） #

利用Vite对new URL的支持，动态生成正确的资源路径：

// 在Vue组件的script中
const getImageUrl = (fileName) => {
  return new URL(`../../assets/${fileName}`, import.meta.url).href
}

模板中使用：

<img :src="getImageUrl(path)" >

Vite会解析new URL中的静态路径部分，自动处理资源的哈希和映射，动态拼接的文件名部分能正确指向编译后的资源。

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