如何在“我的反应”组件状态下从本地文件夹中添加图像？

Question

下面是代码，我想从本地文件夹中添加图像，而不是item#1,2,3，.我怎么能这么做？此外，如果你们中的任何人都知道一个好的源代码来创建产品滑块，请让我知道，谢谢。

import Carousel from 'react-elastic-carousel';

class ProductSlider extends Component {
  state = {
    items: [
      {id: 1, image: 'item #1'},
      {id: 2, image: 'item #2'},
      {id: 3, image: 'item #3'},
      {id: 4, image: 'item #4'},
      {id: 5, image: 'item #5'}
    ]
  }

  render () {
    const { items } = this.state;
    return (
      <Carousel>
        {items.map(item => <div key={item.id}>{item.image}</div>)}
      </Carousel>
    )
  }
}
export default ProductSlider;

Answer 1

如果你正在用创建-反应-应用程序构建应用程序。导入图像的最简单方法之一是使用public文件夹。将您的图像公开，并像这样编写代码。

1. 使public文件夹位于项目的根路径
2. 中，将图像放入公用文件夹

中

public
├── 1.png
├── 2.png
├── 3.png
└── 4.png

import Carousel from 'react-elastic-carousel';

class ProductSlider extends Component {
  state = {
    items: [
      {id: 1, image: '/1.png'},
      {id: 2, image: '/2.png'},
      {id: 3, image: '/3.png'},
      ...
    ]
  }

  render () {
    const { items } = this.state;
    return (
      <Carousel>
        {items.map(item => <div key={item.id}><img src={item.image} alt='fill something' /></div>)}
      </Carousel>
    )
  }
}
export default ProductSlider;

您可以从此文档中找到有关公用文件夹的更多信息。https://create-react-app.dev/docs/using-the-public-folder/