项目场景:
使用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>
);
}