Javascript 如何在ReactJS中设置图像url

我试图在

ReactJS

中设置

img

标记内图像的路径，但它没有显示

这就是我试过的

import React, { Component } from "react";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.css";

export default class CarouselComponent extends Component {

  render() {
    return (
      <Carousel
        showArrows
        emulateTouch
        infiniteLoop
        autoPlay
        interval={2000}
        onChange={this._onChange}
        onClickItem={this._onClickItem}
        onThumbClick={this._onClickThumb}
      >
        <div>
    <img src="../images/sample1.jpg" /> {/*not working*/}
          <p className="legend">Welcome to W.W Coders</p>
        </div>
        <div>
          <img src="http://placehold.it/1080x300?" />
          <p className="legend">Faculty of Computing</p>
        </div>
        <div>
          <img src="http://placehold.it/1080x300?" />
          <p className="legend">Faculty of Engineering</p>
        </div>
        <div>
          <img src="http://placehold.it/1080x300?" />
          <p className="legend">Faculty of Business Management</p>
        </div>
      </Carousel>
    );
  }
}

import React，{Component}来自“React”；
从“反应响应旋转木马”导入{Carousel}；
导入“react responsive carousel/lib/styles/carousel.css”；
导出默认类CarouseComponent扩展组件{
render（）{
返回(
{/*不工作*/}
欢迎来到W.W编码器
计算学院

工程学院

商业管理学院

);
}
}

这是我的文件夹结构

---

有人能告诉我哪里出了问题吗？

从您的项目结构来看，您应该将所有图像放在

公共

文件夹中。任何可通过url直接访问的文件（如图像）都应位于该文件夹内。

src

和其他文件夹中的文件旨在构建/编译，而不是通过URL直接访问

您应该将

图像

文件夹移动到

公用

文件夹中。因此，这就像：

/public/images/sample1.jpg

然后，您可以像这样访问它：

src="/images/sample1.jpg"

---

假设您使用的是

createreact应用程序

，下面是。看起来他们希望您使用一个变量作为路径，但通常您可以只使用根（

/

）。

假设您正在使用webpack或类似的捆绑程序进行代码编译，您可以使用文件加载器来确保将图像复制到编译文件夹，并获得指向它的路径，如下所示：

import imagePath from '../images/sample.jpg'

...

<img src={imagePath} />

从“../images/sample.jpg”导入imagePath
...