Question

reactjs中有一个组件，所有图像导入为

import client01 from '../../assets/images/site/client-01.png';
import client02 from '../../assets/images/site/client-02.png';
import client03 from '../../assets/images/site/client-03.png';
import client04 from '../../assets/images/site/client-04.jpg';
import client05 from '../../assets/images/site/client-05.jpg';
import client06 from '../../assets/images/site/client-06.jpg';

，并在代码中用作

<img src={client05} alt="client_5" />

我的问题是，如果要从api获取这些值，那么应该如何加载图像。例如

{
  "web-data": {
    "Asset": {
      "client01": "../../assets/images/site/client-01.png",
      "client02": "../../assets/images/site/client-02.png",
      "client03": "../../assets/images/site/client-03.png",
      "client04": "../../assets/images/site/client-04.png",
      "client05": "../../assets/images/site/client-05.png"
    }
  }
}

我得到了这些值并将其存储在本地状态，如何将这些图像导入我的reactjs组件中？

Answer 1

您可以使用require方法代替import

    <img src={require(web-data.Assets.client05)} alt="client_5" />

Answer 2

您可以在加载组件并将其保存为组件状态时获取它们。在这两者之间，您可以向用户显示装载程序微调器：


constructor(props) {
  super(props);
  this.state= {
    imagesLoaded: false,
    images: []
  }
}

componentDidMount() {
  fetch(APIURL)
    .then(data => {
      this.setState({ images: data.images, imagesLoaded: true });
    }
}

然后引用您组件中的那些图像，例如：

render() {
  if (!this.state.imagesLoaded){
    return <LoaderSpinner />
  }

  return (
    {
      for (img in this.state.images) {
        return <img src={img}/>
      } 
    }
  )
}

我试图使其保持通用。希望我能正确理解您的问题，这对您有帮助

在reactjs中动态导入图像资产

2 个答案: