在image标签展示图片的时候用uri绑定图片地址变量但是怎么整都不显示图片
<Image style={styles.photo} source={{ uri: this.state.photoUrl }} />
photo: {
flex: 1,
resizeMode: 'cover'
}
原来是要给图片加个宽高,不加的话无法显示,我们了解到,在浏览器中,如果你不给图片指定尺寸,那么浏览器会首先渲染一个0x0大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。(我遇到的问题就是它不显示...)这样做的最大问题是UI会在图片加载的过程中上下跳动,使得用户体验非常糟糕。
photo: {
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
}
这样就ok了
Image还有另一个绑定地址方法
<Image source={source={require('./images/add.png')}} />
这种方式设不设置宽高都行