我使用 Carousel,在这个 Carousel 中,我对数据使用了 items const,但不显示图像。
我的常量
var items = [
{
url:'../../assets/img/hors1.jpg',
name: "با چند تار مو از اسبتان، او را بهتر بشناسید. ",
description: "شاید برایتان عجیب و باور نکردنی باشد که با چند تار مو از اسبتان می توانید اطلاعاتی در خصوص میزان هوش، کنجکاوی و آموزش پذیری او بدست آورید. این همه ی ماجرا نیست!"
},
{
url:'../../assets/img/horse2.jpg',
name: "با چند تار مو از اسبتان، او را بهتر بشناسید. ",
description: "شما با همان چند تار مو همچنین می توانید از میزان ریسک ابتلای او به بیماری های ژنتیکی آگاه شوید و خواهیددانست اگر قرار است کره ای داشته باشد تا چه میزان احتمال انتقال بیماری به فرزندش وجود دارد."
},
{
url:'../../assets/img/horse3.jpg',
name: "با چند تار مو از اسبتان، او را بهتر بشناسید. ",
description: " همان چند تار مو کافیست تا خلوص نژادی اسبتان را بطور دقیق بدانید و تشخیص دهید کره اش پس از تولد چه رنگی خواهد داشت. ماموریت ما این است که برای کشف دنیای اسبتان در کنارتان باشیم و کمک کنیم تا زندگی مطلوبتری برای اسبتان رقم بزنید و یا اگر پرورش دهنده اسب هستید، اسب های رویاییتان را پرورش دهید."
}
];
为了显示数组的每个成员,我使用了以下组件,它不显示图像。 我也用过要求。使用时,显示如下错误。
Cannot find module '../../assets/img/horse2.jpg'
const Item = ({item}) =>
{
useEffect(()=>{
console.log('props.url',item.url);
},[item.url])
return (
<PaperStyle>
<ImageCarousel src = {item.url}></ImageCarousel>
<TitleConatiner>
<TitleCarousel>{item.name}</TitleCarousel>
<DiscCarousel>{item.description}</DiscCarousel>
<ButtonStyle>
ورود
</ButtonStyle>
</TitleConatiner>
</PaperStyle>
)
}
const CarouselComponnet = (props) =>
{
return (
<CarouselContainer
NextIcon={<NavigateNextIcon/>}
PrevIcon={<NavigateBeforeIcon/>}
// animation="fade"
// timeout={1500}
// interval={8000}
style={{ zIndex: -1251 }}
>
{
items.map((item, i) => <Item key={i} item={item} /> )
}
</CarouselContainer>
)
}