轮播没有显示正确的图像

Question

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

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

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

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

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

仅提及所有图像 slide1.jpg、slide2.jpg 和 slide3.jpg 都存在于 common 和 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"。 这意味着从当前目录“上”一级。