从reactjs中的URL渲染图像

Question

是否可以根据URL预渲染图像列表，以防止首先使用react或JS加载显示在屏幕上？

提前感谢。

编辑：我有一个图像轮播，并且所有图像都是一个接一个地显示。首次显示图像时，此图像需要花费一些时间才能呈现，因为她需要从网址中获取。如果我第二次显示相同的图像，我将不会等待。然后，我想知道是否有一种解决方案，即使在加载时间更长的情况下，在ComponentDidMount中获取url后直接预加载所有图像。

Answer 1

不清楚您是什么意思。

通过预加载，您是想让组件仅在图像准备就绪时才呈现吗？

如果是这样，您可以执行以下操作：

componentDidMount() {
  const img = new Image();
  img.src = Newman; // by setting an src, you trigger browser download

  img.onload = () => {
    // when it finishes loading, update the component state
    this.setState({ imageIsReady: true });
  }
}

render() {
  const { imageIsReady } = this.state;

  if (!imageIsReady) {
    return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
  } else {
    return <img src={Newman} /> // along with your error message here
  }
}