Vue中使用JS脚本批量导入图片的问题咨询

直接改进现有实现（替换为ES模块静态导入） #

把你当前的showcase-images.js里的require全部替换成ES标准的import语法，浏览器原生支持ES模块，打包工具也完全兼容：

// showcase-images.js
import cheat1 from '../assets/images/showcase/cheat1.png';
import cheat2 from '../assets/images/showcase/cheat2.png';
import cheat3 from '../assets/images/showcase/cheat3.png';
import omdb1 from '../assets/images/showcase/omdb1.png';
import omdb2 from '../assets/images/showcase/omdb2.png';
import omdb3 from '../assets/images/showcase/omdb3.png';

export { cheat1, cheat2, cheat3, omdb1, omdb2, omdb3 };

组件里的导入和调用方式保持不变：

<script>
import * as showcaseImages from '../utilities/showcase-images.js'
</script>

<template>
  <img :src="showcaseImages.omdb1">
</template>

更高效的批量导入方案（适合大量图片） #

如果图片数量特别多，不想逐个写导入语句，可以根据你的项目构建工具选择以下方案：

方案1：Vue CLI（Webpack环境）使用require.context #

利用Webpack内置的require.context自动遍历指定目录下的所有图片：

// showcase-images.js
const imageMap = {};
// 第一个参数是图片目录，第二个参数是否遍历子目录，第三个参数是匹配图片的正则
const imageContext = require.context('../assets/images/showcase', false, /\.png$/);

imageContext.keys().forEach(imgPath => {
  // 从路径中提取文件名作为key（比如./cheat1.png → cheat1）
  const imgName = imgPath.replace(/^\.\/(.*)\.png$/, '$1');
  imageMap[imgName] = imageContext(imgPath);
});

export default imageMap;

组件中导入后直接使用：

<script>
import showcaseImages from '../utilities/showcase-images.js'
</script>

<template>
  <img :src="showcaseImages.omdb1">
</template>

方案2：Vite环境使用import.meta.glob #

Vite提供了import.meta.glob用于批量导入资源，开启eager: true可以直接同步获取资源：

// showcase-images.js
const imageModules = import.meta.glob('../assets/images/showcase/*.png', { eager: true });
const imageMap = {};

for (const fullPath in imageModules) {
  // 从完整路径中提取文件名（比如../assets/images/showcase/omdb1.png → omdb1）
  const match = fullPath.match(/\/showcase\/(.*)\.png$/);
  if (match) {
    const imgName = match[1];
    imageMap[imgName] = imageModules[fullPath].default;
  }
}

export default imageMap;

组件调用方式和上面一致。

为什么原来的require会报错？ #

浏览器端的ES模块环境不支持CommonJS的require语法，只有Node.js环境或者Webpack等打包工具的特定处理流程中才能直接使用require。你的Vue项目如果是基于Vite或最新Vue CLI创建的，默认采用ES模块规范，所以浏览器无法识别require，导致Uncaught ReferenceError: require is not defined错误。

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