javascript - 在轮播中不显示图像反应

问题描述

我使用 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>
    )
}

标签： javascriptreactjsimagecarouselsrc

javascript - 在轮播中不显示图像反应

问题描述

解决方案

推荐阅读