使用antd实现轮播图时遇到的src问题

项目场景：

使用antd实现轮播图时遇到的src问题

---

问题描述

在使用antd实现轮播图的时候发现了这样一个问题：

起初我使用Image组件时， <Image src={"../../../images/penuins1.jpg"} /> 发现图片显示不出来

（这个问题暂时没有找到原因，如果有知道的欢迎评论区指出）

于是修改引入图片路径的方法使用了<Image src={require("../../../images/penuins1.jpg")} /> 这时图片可以正常显示。

但由于我想同时显示多个图片，写多个Image组件显得代码重复，于是我想通过map的方式遍历所有图片路径。

但当我使用map对图片的路径遍历时报了以下错误：

        Cannot find module '../../../images/penuins1.jpg'

export default function HomePageShow() {
  const images = [
    '../../../images/penuins1.jpg',
    '../../../images/penuins2.jpg',
    '../../../images/penuins3.jpg',
    '../../../images/penuins4.jpg',
    '../../../images/penuins5.jpg',
  ]
  return (
    <div className="home_show">
      <div className="scrollImg">
        <Carousel autoplay>
          {images.map((image, index) => (
            <div key={index}>
              <Image src={require(image)} />
            </div>
          ))}
        </Carousel>
      </div>
    </div>
  )
}

---

原因分析：

require需要静态的字符串作为参数，以便静态的构建分析

在 JSX 或 TSX 文件中，由于require需要静态字符串作为参数，因此无法直接在map函数中使用变量路径。

代码中image 是一个变量，不是静态字符串，所以构建工具（如 Webpack）无法处理它。

---

解决方案：

通过直接import的方式，不是用require

import penuins1 from '../../../images/penuins1.jpg';  
import penuins2 from '../../../images/penuins2.jpg';  
import penuins3 from '../../../images/penuins3.jpg';  
import penuins4 from '../../../images/penuins4.jpg';  
import penuins5 from '../../../images/penuins5.jpg';  
  
export default function HomePageShow() {  
  const images = [  
    penuins1,  
    penuins2,  
    penuins3,  
    penuins4,  
    penuins5,  
  ];  
  

//其余代码...

}

可以使用require.context

// 使用require.context来创建一个函数，该函数可以动态地解析图片路径  
const imagesContext = require.context('../../../images', true, /\.jpg$/);  
  
export default function HomePageShow() {  
  const images = [  
    'penuins1.jpg',  
    'penuins2.jpg',  
    'penuins3.jpg',  
    'penuins4.jpg',  
    'penuins5.jpg',  
  ];  
  
  return (  
    <div className="home_show">  
      <div className="scrollImg">  
        <Carousel autoplay>  
          {images.map((imageName, index) => {  
            // 使用imagesContext函数动态地获取图片模块  
            const imageModule = imagesContext('./' + imageName);  
            return (  
              <div key={index}>  
                {/* 使用imageModule.default来访问图片的URL */}  
                <Image src={imageModule.default} alt={`Image ${index + 1}`} />  
              </div>  
            );  
          })}  
        </Carousel>  
      </div>  
    </div>  
  );  
}