reactjs - 在 React 组件中动态导入图像

Question

我有一个文章组件，它显示了一个包含列出文章的博客页面。

render() {
    const articles = {
        ...this.state.articles
    }

    const article = Object.keys(articles).map(cur => {
        return <Article
            key={this.state.articles[cur].id}
            imgName={this.state.articles[cur].thumb}
            title={this.state.articles[cur].title}
            meta={this.state.articles[cur].meta}
            clicked={() => this.detailedHandler(this.state.articles[cur].id)}
            detailed={this.state.articles[cur].detailed} />
    });

如您所见，我将带有道具的图像名称传递给 Article 组件。然后我想为每篇文章显示适当的图像。

如何根据我从 Articles 组件收到的 props (props.imgName) 在 Article 组件中导入图像？

标签： reactjsimageimport

Answer 1

我使用了上下文。

const images = require.context('../../../assets/img', true);
loadImage = imageName => (assets(`./${imageName}`).default);
<img src={loadImage("someimage.png")} alt="" />

我不知道这是否是最佳解决方案，但它有效。