旋转木马没有显示正确的图像

Question

在反应项目中，我正在尝试使用旋转木马，但面临图像问题。在我的项目中，default.js是我试图实现轮播的src / common文件夹中的组件。

如果src如下所示，在img标签内，carousel显示正确的图像。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然而，在img标签中，如果src如下所示，则carousel不会显示正确的图像。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提到所有图像slide1.jpg，slide2.jpg和slide3.jpg都存在于common和img文件夹中。

我的猜测是src标签中提到的路径不正确。但是我无法找到我的错误。 下面是我的文件夹结构的图像。提前谢谢。

Answer 1

尝试将src属性更改为src="../img/slide2.jpg"。 这意味着从当前目录“向上”一级。

Answer 2

如果你想这样做，你需要将你的src包装成{}，如下所示：

import image from './../img/slide2.jpg';

但这样做的最佳方式（我认为）是导入该文件： <img className="d-block w-100" src={image} alt="Slide 2" width="800" height="600"/>

然后将您的img标记更改为：

{{1}}