我有一堆在项目里的图片 想遍历渲染出来（图片都是相对路径） 一顿操作页面报错

复制 1<img :src="item.img" alt="" />

http://localhost:3000/@/assets/images/channel/china.png 404 (Not Found)

在 Vue.js 中，src 属性不能直接使用动态链的相对路径，因为 Webpack 的处理方式要求静态资源路径在编译时是已知的。动态路径无法被 Webpack 识别和解析。

使用 Webpack 的 require.context 来批量导入图片并在你的 Vue.js 组件中动态引用它们。 （图片文件在 src/assets/images/channel 目录下，并且文件名与 channelData 中的键一致。例如，如果你有 china.png 和 japan.png，它们的文件名应与 imageMap 中的键一致。）

1. 创建图片映射

   首先，创建一个用于导入图片的文件。例如，在 src/assets 目录下创建一个 imageLoader.js 文件：

复制 1
 2const images = require.context('@/assets/images/channel', false, /\.(png|jpe?g|svg)$/);
 3
 4const imageMap = images.keys().reduce((map, file) => {
 5  const key = file.replace('./', '').replace(/\.(png|jpe?g|svg)$/, '');
 6  map[key] = images(file);
 7  return map;
 8}, {});
 9
10export default imageMap;
11

2. 在组件中使用图片

在 Vue 组件中，导入这个映射对象，并根据 channelData 使用这些图片：

复制 1<template>
 2  <div>
 3    <div v-for="category in Object.keys(channelData)" :key="category">
 4      <div v-for="item in channelData[category]" :key="item.code">
 5          <img :src="item.img" :alt="item.name" />
 6      </div>
 7    </div>
 8  </div>
 9</template>
10
11<script>
12import imageMap from '@/assets/imageLoader';
13
14export default {
15  data() {
16    return {
17      channelData: {
18        Asia: [
19          {
20            code: "CN",
21            name: "China",
22            img: imageMap['china'],
23          },
24          {
25            code: "JP",
26            name: "Japan",
27            img: imageMap['japan'],
28          },
29        ],
30        NorthAmerica: [
31          {
32            code: "US",
33            name: "United States",
34            img: imageMap['america'],
35          },
36          {
37            code: "CA",
38            name: "Canada",
39            img: imageMap['canada'],
40          },
41          {
42            code: "MX",
43            name: "Mexico",
44            img: imageMap['mx-image'],
45          },
46        ],
47        
48      }
49    };
50  }
51}
52</script>
53

• require.context 是 Webpack 的一个特性，用于动态导入模块。

• 它返回一个上下文模块函数，提供了 keys()、resolve() 和 id 方法。

• 你可以用它来批量导入目录中的文件，并在项目中动态使用这些文件，适用于处理大量静态资源的场景。