我已经使用 create-react-app 创建了一个项目,并且在源代码中有一个名为 images 的文件夹。 我想在图像文件夹中循环并显示它们。
到目前为止,我的代码如下所示:
import React, { Component } from 'react'
import images from './images/wd/'
const listOfImages = []
class Myloop extends Component {
importAll(r) {
return r.keys().map(r)
}
componentWillMount() {
listOfImages = this.importAll(require.context(images, false, /\.(png)$/))
}
render() {
return (
<>
<ul>
<li>
{listOfImages.map((images, index) => (
<img src={images} key={index} alt="info"></img>
))}
</li>
</ul>
</>
)
}
}
export default Myloop
保存文件后,我在终端上看到以下消息:
Module not found: Can't resolve './images/wd/' in '/mywebsite/src/components'
我不确定哪里出了问题,但任何帮助都会很棒。
最佳答案
这是正确答案 Dynamically import images from a directory using webpack 您不能仅使用“导入”同时导入整个目录
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(
require.context("./images/wd", false, /\.(png|jpe?g|svg)$/)
);
UPD:所以在你的情况下删除 import
,将 images
与 url 交换并将 listOfImages
添加到状态
import React, { Component } from "react";
class Myloop extends Component {
constructor(props) {
super(props);
this.state = { listOfImages: [] };
}
importAll(r) {
return r.keys().map(r);
}
componentWillMount() {
const list = this.importAll(
require.context("./images/wd", false, /\.(png)$/)
);
this.setState({
listOfImages: list
});
}
render() {
return (
<>
<ul>
<li>
{this.state.listOfImages.map((image, index) => (
<img src={image} key={index} alt="info"></img>
))}
</li>
</ul>
</>
);
}
}
export default Myloop;
关于javascript - 在 react 中循环图像的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64324949/