javascript - 如何在ReactJS中设置图片网址

我正在尝试在img的ReactJS标记内设置图像的路径，但未显示...

这就是我尝试过的...

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>
    );
  }
}

这是我的文件夹结构



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

最佳答案

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

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

...

<img src={imagePath} />

关于javascript - 如何在ReactJS中设置图片网址，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56656155/