Я новичок в реакции и пытаюсь создать слайдер. Я хочу создать слайд, который отображает текст и изображение на одном слайде. Текст отображается хорошо, но я не могу отобразить свое изображение. Я почти пробую все, что вижу на этом форуме, но не работает.
файл слайдера данных
import React from 'react';
import one from "./img/first.png"
const dataSlider = [
{
id: 1,
img: {one},
title: "Summer sale",
description: "Don't compromise on style! get flat 30% off for new arrivals",
bg: "black",
},
{
id: 2,
img:{one},
title: "Winter sale",
description: "Don't compromise on style! get flat 30% off for new arrivals",
bg: "red",
},
{
id: 3,
img:{one},
title: "Popular sale",
description: "Don't compromise on style! get flat 30% off for new arrivals",
bg: "blue",
},
];
export {dataSlider};
Slider.jsx
<Arrow direction = "left" onClick = {() => handleClick("left")}><ArrowLeftOutlined /></Arrow>
<Wrapper>
{dataSlider.map(item =>(
<Slide bg = {item.bg}>
<ImgContainer><Img src = {require( `${ item.img }` )} /></ImgContainer>
<InfoContainer><Title>{item.title}</Title><Description>{item.description}</Description><Button>shop now</Button></InfoContainer>
</Slide>
))}
Ваш import one from "/img/first.jpg"
указывает на корень структуры каталогов. Просто удалите начальную /
.
Ваше расширение файла неверно. Измените его на:
import one from "/img/first.png"
Все еще модуль не найден
импортировать один из "./img/first.png"
Не работает. Смотрите мое редактирование в сообщении и отображаемую ошибку.
Ваше редактирование отличается. Он должен начинаться с ./
Поскольку вы используете CRA. Вероятно, было бы проще просто добавить свои изображения в папку public
.
Затем в вашем dataSlider.js
вместо импорта изображения просто сделайте что-то вроде этого:
{
id: 1,
img: "/img/first.png", // this will point to `/public/img/first.png` in the implementation
title: "Summer sale",
description: "Don't compromise on style! get flat 30% off for new arrivals",
bg: "black",
},
И тогда в его использовании вы бы сделали это:
<img src = {item.img} />
Все еще не работает. Модуль не найден: не удается разрешить «img/first.jpg» в «C:\react\Project\ecommerce\src»