动态创建div追加img仅显示alt不加载图片及Vue适配方案

根因说明 #

该问题由Vue配套构建工具（Webpack/Vite）的静态资源处理规则导致：

只有写在Vue template模板中的静态资源相对路径、或者显式被模块导入的静态资源，才会被构建工具识别处理，自动替换为打包后的正确访问路径。你直接用原生DOM API动态拼接的../assets/xxx.jpg相对路径不会被构建工具解析，打包后路径和实际资源产出路径不匹配，因此图片加载失败仅显示alt文本。

可选解决方案 #

方案1：显式导入图片资源（通用，兼容Webpack/Vite所有环境） #

在script代码中先导入目标图片，再将导入结果赋值给img的src属性即可：

// 顶部先导入图片资源
import ImgSrc from '../assets/Images/Image.jpg'

let div = document.createElement('div')
var img = document.createElement('img')
// 直接使用导入的变量赋值src
img.setAttribute('src', ImgSrc)
img.setAttribute('alt', 'Image')
div.appendChild(img)
document.body.appendChild(div)

方案2：按构建工具类型动态解析路径 #

• 若使用Vue CLI/Webpack环境，可以直接用require包裹相对路径：

img.setAttribute('src', require('../assets/Images/Image.jpg'))

• 若使用Vite环境，可以通过new URL配合import.meta.url解析出正确路径：

const imgUrl = new URL('../assets/Images/Image.jpg', import.meta.url).href
img.setAttribute('src', imgUrl)

方案3：使用public目录存放资源 #

将图片放到项目根目录的public/Images/路径下，直接用绝对路径引用即可。public目录下的资源不会被构建工具编译处理，会直接复制到打包后的根目录：

// 路径直接写public下的绝对路径，开头无需加/public前缀
img.setAttribute('src', '/Images/Image.jpg')

注意事项 #

方案1、2引用的assets目录下的图片会被构建工具自动做压缩、文件名加哈希戳处理，适合项目常用的小体积静态资源；方案3的public目录下资源不会被编译处理，适合不需要压缩的大体积资源或者需要固定访问路径的资源。

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