如何在ReactJS中设置图像url

Question

我正在尝试在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>
    );
  }
}

这是我的文件夹结构

​

​

谁能告诉我我哪里出错了？

Answer 1

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

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

...

<img src={imagePath} />

Answer 2

从您的项目结构来看，您应该将所有图像放在public文件夹中。任何可通过url直接访问的文件(如图像)都应该在此文件夹内。src和其他文件夹中的文件旨在构建/编译，而不是通过URL直接访问。

您应该将images文件夹移动到public文件夹中。所以它会是这样的：

/public/images/sample1.jpg

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

src="/images/sample1.jpg"

假设你正在使用create-react-app，这里是some info about the public folder。看起来他们想让您使用一个变量作为路径，但通常您可以只使用根(/)。