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

【问题标题】：How to add image from local folder in the state of my react component?如何在我的反应组件状态下从本地文件夹添加图像？
【发布时间】：2021-03-16 18:07:21
【问题描述】：

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

【问题讨论】：

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

标签： reactjs slider carousel e-commerce

【解决方案1】：

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

在项目的根路径中创建public 文件夹
将图片放入公共文件夹

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/

【讨论】：