Карусель не показывает правильное изображение

Question

В реактивном проекте я пытаюсь использовать карусель, но сталкиваюсь с проблемой имиджа.В моем проекте default.js - это компонент в папке src / common, где я пытаюсь реализовать карусель.

Внутри тега img, если src указан ниже, карусель показывает правильное изображение.

<img className="d-block w-100" src="./slide2.jpg" alt="Slide 2" width="800" height="600"/>

Однако в теге img, если src указан ниже, карусель не показывает правильное изображение.

<img className="d-block w-100" src="./../img/slide2.jpg" alt="Slide 2" width="800" height="600"/>

Просто упомяните, что все изображения slide1.jpg, slide2.jpg и slide3.jpg присутствуют как в общей папке, так и в папке img.

Я предполагаю, чтопуть, указанный в теге src, неверен.Однако я не могу найти свою ошибку.Ниже изображение моей структуры папок.Заранее спасибо.

Answer 1

Если вы хотите сделать это, вам нужно обернуть ваш src в {} следующим образом:

<img src={"./../img/slide2.jpg"} />

Но лучший способ сделать это (я думаю) эточтобы импортировать этот файл: import image from './../img/slide2.jpg';

Затем измените тег img на:

<img className="d-block w-100" src={image} alt="Slide 2" width="800" height="600"/>

Answer 2

Попробуйте изменить свойство src на src="../img/slide2.jpg".Это означает «вверх» на один уровень от текущего каталога.