Модуль не найден на изображениях

Я новичок в реакции и пытаюсь создать слайдер. Я хочу создать слайд, который отображает текст и изображение на одном слайде. Текст отображается хорошо, но я не могу отобразить свое изображение. Я почти пробую все, что вижу на этом форуме, но не работает.

файл слайдера данных

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>

                    ))}

enter image description here

Ошибка: enter image description here

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
29
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ваш import one from "/img/first.jpg" указывает на корень структуры каталогов. Просто удалите начальную /.

Все еще не работает. Модуль не найден: не удается разрешить «img/first.jpg» в «C:\react\Project\ecommerce\src»

Ronyco123 10.04.2022 15:28

Ваше расширение файла неверно. Измените его на:

import one from "/img/first.png"

Все еще модуль не найден

Ronyco123 10.04.2022 15:35

импортировать один из "./img/first.png"

Nir 10.04.2022 15:40

Не работает. Смотрите мое редактирование в сообщении и отображаемую ошибку.

Ronyco123 10.04.2022 15:41

Ваше редактирование отличается. Он должен начинаться с ./

Nir 10.04.2022 15:47
Ответ принят как подходящий

Поскольку вы используете 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} />

Другие вопросы по теме