在渲染之前动态加载图像

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;
    }
}