渲染前动态加载图像

Question

我浏览了很多问题，但找不到正确答案。假设我有一个 images 文件夹，我想在其中显示特定图像。我不知道要显示的图像的名称，它由 RESTful API 连同我正在显示的该对象的许多其他详细信息一起返回。

我考虑了几个替代方案：

无论如何加载所有图像，然后只渲染我需要的图像。我在几个地方找到了这个，但我觉得它很重，不是吗？
使用 webpack 即时 require 我需要的文件。

第二个选项在这里似乎是最好的。但是，当我这样做时：

componentDidMount() {
    axios.get('http://url.to/my/RESTful/api')
       .then(res => {
           this.setState(res.data);
       });
}
render() {
    var pic = require(`../images/${this.state.picture}`)
    return (<img src={pic} alt="some name" />)
);

React 抱怨无法加载 undefined，因为它在 axios 调用完成之前开始渲染。因此，另一种选择是在调用完成时显示加载程序，或者通常阻止渲染。但我的问题是：这里的最佳做法是什么？我应该在每个加载动态数据的页面上都有一个加载程序吗？我想我错过了什么，这就是我伸出援手的原因。你通常是怎么做到的？非常感谢。

Answer 1

尝试以下操作：

class ImageLoader extends Component {
    constructor() {
        super();

        this.data = {
            data: null
        };
    }

    componentDidMount() {
        axios.get("http://url.to/my/RESTful/api").then(res => {
            this.setState({ data: res.data });
        });
    }

    render() {
        return this.state.data
            ? <img
                  src={require(`../images/${this.state.data.picture}`)}
                  alt="some name"
              />
            : null;
    }
}

渲染前动态加载图像

Dynamically load images before render

reactjs

webpack

axios