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

Question

在使用antd实现轮播图的时候发现了这样一个问题：
当我使用map对图片的路径遍历时会报错：Cannot find module '../../../images/penuins1.jpg'
但是当我不使用遍历，重复的写几个<Image src={require( '../../../images/penuins1.jpg')} /> 就是好用的 想知道这是为什么呢？
====================================================================
补充：在我将路径设置绝对路径时，会出现图片不显示的问题

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

====================================================================

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>
  )
}

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

在使用antd实现轮播图时遇到的src问题，出现报错"Cannot find module '../../../images/penuins1.jpg'"的原因是require函数在编译时需要确定模块的路径，而路径是在编译时解析的，无法通过变量传递。

解决这个问题的方法是将图片路径数组中的字符串直接传递给Image组件的src属性，而不是通过require函数解析。

以下是解决方案：

1. 修改图片路径数组为绝对路径：

const images = [
  require('../../../images/penuins1.jpg'),
  require('../../../images/penuins2.jpg'),
  require('../../../images/penuins3.jpg'),
  require('../../../images/penuins4.jpg'),
  require('../../../images/penuins5.jpg'),
]

1. 在map函数中直接使用图片路径：

{images.map((image, index) => (
  <div key={index}>
    <Image src={image} />
  </div>
))}

修改后的代码如下：

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

  return (
    <div className="home_show">
      <div className="scrollImg">
        <Carousel autoplay>
          {images.map((image, index) => (
            <div key={index}>
              <Image src={image} />
            </div>
          ))}
        </Carousel>
      </div>
    </div>
  )
}

希望这个解决方案能够帮助到你。