require.context解决img的src属性不能动态链相对路径问题

起因是：

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

<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 文件：

// src/assets/imageLoader.js
const images = require.context('@/assets/images/channel', false, /\.(png|jpe?g|svg)$/);

const imageMap = images.keys().reduce((map, file) => {
  const key = file.replace('./', '').replace(/\.(png|jpe?g|svg)$/, '');
  map[key] = images(file);
  return map;
}, {});

export default imageMap;

2. 在组件中使用图片

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

<template>
  <div>
    <div v-for="category in Object.keys(channelData)" :key="category">
      <div v-for="item in channelData[category]" :key="item.code">
          <img :src="item.img" :alt="item.name" />
      </div>
    </div>
  </div>
</template>

<script>
import imageMap from '@/assets/imageLoader';

export default {
  data() {
    return {
      channelData: {
        Asia: [
          {
            code: "CN",
            name: "China",
            img: imageMap['china'],
          },
          {
            code: "JP",
            name: "Japan",
            img: imageMap['japan'],
          },
        ],
        NorthAmerica: [
          {
            code: "US",
            name: "United States",
            img: imageMap['america'],
          },
          {
            code: "CA",
            name: "Canada",
            img: imageMap['canada'],
          },
          {
            code: "MX",
            name: "Mexico",
            img: imageMap['mx-image'],
          },
        ],
        // 其他数据...
      }
    };
  }
}
</script>

总结：

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

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

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