1

我是新来的反应。我有一个用例，我必须缓存第三方服务器上的图像。（想要避免太多的服务器调用来每秒渲染图像）为此，我使用react-native-web

我的应用程序是一个反应网络应用程序。代码片段是：

import { Image } from 'react-native-web';

class ImageComponent extends Component {

  componentWillMount() {
    const interval = setInterval(() => { this.timer(); }, 2000);
    this.setState({ interval });
    const urlOfImages = ['https://homepages.cae.wisc.edu/~ece533/images/mountain.png'];

    const preFetchTasks = [];

    urlOfImages.forEach((url) => {
        preFetchTasks.push(Image.prefetch(url));
    });
}

  render() {

     const images = ['https://homepages.cae.wisc.edu/~ece533/images/mountain.png'];
     const text = 'something';
     return (
       <div>
                <span>{ text }</span>
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
               <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
                <Image source={{ uri: images[0] }} alt="Banner" title="Banner" border="0" />
       </div>
      );
  }


}

通过网络选项卡，我可以看到只有一个请求从服务器下载图像。这是 Image 标签所期望的，但没有任何 Image 被呈现在浏览器上。

任何人都可以直接解决图像标签没有被渲染的问题，或者有没有更好的方法来使用反应缓存来自服务器的图像？

4

0 回答 0