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组件。然后，我想为每篇文章显示适当的图像。

如何基于我从“文章”组件中收到的道具（props.imgName）将图像导入“文章”组件中？

Answer 1

到目前为止，您可以使用Stage 3 proposal通过dynamic imports从API响应动态加载图像。

生成的代码应类似于：

loadImage = imageName => {
  import(`./assets/${imageName}.jpg`).then(image => {
    this.setState({
      image
    });
  });
};
render() {
  const { image } = this.state;
  return (
    <Fragment>
      {image && <img src={image} alt="" />}
    </Fragment>
  );
}

View Codesandbox Demo

create-react-app中开箱即用地支持此功能，如果使用其他系统，则可以使用Babel plugin

Answer 2

我使用上下文。

const images = require.context('../../../assets/img', true);
let img = images('./' + props.imageName);
<img src={img} alt="" />

我不知道这是否是最佳解决方案，但是它可以工作。

Answer 3

这是我的方式，效果很好:)

<块引用>

import React, {useState} from "react"

const getFavorites = (props) => {

  const {item, favouritesNote} = props;
  const [image, setImage] = useState("");

  (function (imageName) {
    import(
      `../../../../assets/images/chart/favorite${imageName ? "_active" : ""}.png`
    ).then((image) => setImage(image.default));
  })(favouritesNote[item.id]);

  return (
    <div>{image && <img alt="" className="img-responsive" src={image} />}</div
  )
}

在React组件中动态导入图像

3 个答案: