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

在渲染之前动态加载图像

1 个答案: