将整个图像目录导入数组 - 反应

Question

我是新的反应

我使用 create-react-app 创建了我的 react 项目。

我需要与import logo from './logo.png';相同的功能，但对于目录。

像import * as Images from './images/';和图像这样的东西将是一个数组。

我为webpack找到了一些解决方案，但它们显然不起作用，这在我的情况下可能吗？

对于上下文，这里是我想如何使用图像。目前，它们被硬编码到 this.state.images[] 中。

const style = {
//overflowY: "scroll",
height: 5000,
width: "100%",
backgroudImage: `url(${this.state.images[this.state.index]})`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}; 

提前谢谢你。

Answer 1

你可以试试这个

创建一个常量来保存您需要的图像，例如

export const Images =  [
'/assets/images/1.png', 
'/assets/images/2.png',  
'/assets/images/3.png'
]; 

然后在您的组件中，导入该常量并呈现如下

从 './.. 导入 { 图像 }。/../utils/Image'

<React.Fragment>
{
Images.map((item, index) =>  {
return <div 
key={index} 
style={{
//overflowY: "scroll",
height: 5000,
width: "100%",
backgroundImage: `url(${item})`,
backgroundPosition: "center",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"}}>
</div>
})
}
</React.Fragment>

如果将样式设置为 className，然后将图像动态传递给上下文

<React.Fragment>
{
Images.map((item, index) =>  {
return <div 
key={index} 
className='image-container'
style={{backgroundImage: `url(${item})`}}>
</div>
})
}
</React.Fragment>

如果您要更新 webpack，那么请安装 url 加载器和文件加载器

npm install url-loader file-loader --save-dev

然后将 webpack 配置更新为

module: {
rules: [
{
test: /.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},