react-native之Image加载url图片问题

react-native之Image加载图片问题

Image加载图片有两种方式，一种是本地资源，一种可以是网络图片，

本地资源加载，如：

<Image source={require('./images/add.png')}/>

这种方式简单，都没有问题。

通过url的方式加载图片，如：

 <Image source={{uri:'http://xxxxxxxx'}} style={{width: 90,height: 90}}/>

下面这种是错误的：

 <Image source={{uri:'http://xxxxxxxx'}}/>

这里需要注意两点： 1、图片地址关键字是 uri 不是 url， 2、需要指定图片的size，否则无法显示，我们了解到，在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!