如何在我的react组件的状态下添加来自本地文件夹的图像

Question

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

如果您正在使用create-react应用程序构建应用程序。导入图像最简单的方法之一是使用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/