Reactjs 如何在我的组件状态下从本地文件夹添加图像？

这是代码，我想添加本地文件夹中的图像，而不是项目#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;

从“react elastic Carousel”导入转盘；
类ProductSlider扩展组件{
状态={
项目：[
{id:1，图像：'item#1'}，
{id:2，图像：'item#2'}，
{id:3，图像：'item#3'}，
{id:4，图像：'item#4'}，
{id:5，图像：'item#5'}
]
}
渲染（）{
const{items}=this.state；
返回(
{items.map（item=>{item.image}）
)
}
}
导出默认产品滑块；

如果您正在使用create react应用程序构建应用程序。导入图像最简单的方法之一是使用

public

文件夹。将您的图像公开，然后像这样编写代码

将项目根路径中的

文件夹设为公共文件夹

将图像放入公用文件夹

从“react elastic Carousel”导入转盘；
类ProductSlider扩展组件{
状态={
项目：[
{id:1，图像：'/1.png'}，
{id:2，图像：'/2.png'}，
{id:3，图像：'/3.png'}，
...
]
}
渲染（）{
const{items}=this.state；
返回(
{items.map（item=>）}
)
}
}
导出默认产品滑块；

您可以从此文档中找到有关公用文件夹的详细信息。

---

我认为更好的方法是将图像的url存储在状态中。我认为，当DOM中不存在映像时，不可能在状态中包含映像。也许你应该有一个图片url列表，然后用这个url添加标签，在图片加载后，如果你真的需要的话，你可以查询它们并将它们存储在状态中。但是我只是把它们放在我的电脑里，我可以将它们存储在某个地方并使用url吗？

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;