构建阶段如何动态加载图片？打包未包含图片的问题求助

一、先搞定强制打包图片的正确姿势 #

不管你用Vue、React还是Vite/Webpack这类构建工具，要让图片被打包，核心是让构建工具能识别到图片引用，以下两种方案任选：

1. 批量导入生成映射表（推荐） #

不要直接用纯字符串数组存图片名，而是通过构建工具的批量导入API，让工具自动追踪并打包图片：

• Webpack/Vue2 示例：

// 批量导入指定目录下的所有图片
const images = require.context('./assets/images', false, /\.(png|jpe?g|svg)$/)
// 生成「图片名→打包后路径」的映射
const imageMap = images.keys().reduce((map, key) => {
  const name = key.replace(/^\.\/(.*)\.\w+$/, '$1') // 提取不带后缀的文件名
  map[name] = images(key)
  return map
}, {})

• Vite/Vue3/React 示例：

// 批量导入指定目录下的所有图片
const images = import.meta.glob('./assets/images/**/*', { eager: true })
// 生成映射表
const imageMap = {}
for (const path in images) {
  const name = path.match(/\/([^/]+)\.\w+$/)[1] // 提取文件名
  imageMap[name] = images[path].default
}

2. 配置构建工具强制打包（兜底方案） #

如果必须用纯字符串数组，可通过配置让工具强制打包指定目录的图片：

• Webpack 用copy-webpack-plugin复制图片到输出目录：

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './assets/images', to: 'images' } // 复制到输出目录的images文件夹
      ]
    })
  ]
}

• Vite 配置build.assetsInclude强制识别图片：

export default {
  build: {
    assetsInclude: ['**/*.png', '**/*.jpg', '**/*.svg']
  }
}

二、模板中正确加载打包后的图片 #

1. 用映射表加载（推荐） #

模板循环时直接取映射表中的路径，自动适配打包后的哈希文件名：

• Vue 模板示例：

<template>
  <div v-for="imgName in imgNames" :key="imgName">
    <img :src="imageMap[imgName]" :alt="imgName" />
  </div>
</template>
<script setup>
const imgNames = ['img1', 'img2', 'img3']
// 引入前面生成的imageMap
</script>

• React 示例：

const imgNames = ['img1', 'img2']
// 引入imageMap
function ImageList() {
  return (
    <div>
      {imgNames.map(name => (
        <img key={name} src={imageMap[name]} alt={name} />
      ))}
    </div>
  )
}

2. 手动拼接路径（仅适用于copy插件场景） #

如果用了复制图片的方案，需拼接基础路径避免路径错误：

• Vue 示例：

<template>
  <div v-for="imgName in imgNames" :key="imgName">
    <img :src="`${process.env.BASE_URL}images/${imgName}.png`" :alt="imgName" />
  </div>
</template>

• Vite/React 示例：

const imgNames = ['img1', 'img2']
function ImageList() {
  return (
    <div>
      {imgNames.map(name => (
        <img 
          key={name} 
          src={`${import.meta.env.BASE_URL}images/${name}.png`} 
          alt={name} 
        />
      ))}
    </div>
  )
}

关键提醒 #

• 不要直接写死纯字符串路径（比如./assets/images/img1.png），循环时构建工具没法静态分析这类字符串，自然不会打包。
• 批量导入生成映射表的方式最稳妥，既能确保图片被打包，还能自动处理哈希文件名，优化缓存。

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