react-native image 设置默认图片

Image组件的引入图片提供了下面这几种类型:静态图片资源,网络图片资源

静态资源引用方式:

<Image
  source={require('./bunny.png')}
  style={styles.base}>
</Image>  

网络图片资源

<Image
    source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
    style={styles.base}>
</Image>  

默认图片

<Image
    defaultSource={require('./bunny.png')} //默认图片
    source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
    style={styles.base}>
</Image>  

注意事项:

  1. 图片上添加文字
<Image  
    defaultSource={require('./bunny.png')} //默认图片
    source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
    style={styles.base}>
    <Text>文字</Text>
</Image>
  1. 想添加背景图片
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
       <Text>Inside</Text>
 </ImageBackground>
  1. 图片无法显示
    第一:检查是否资源请求正确,比如网络资源使用{uri}注意加上{},本地资源require没有{}
    第二:检查是否有设置宽高,没有设置是不会显示滴哦~

ps:觉得还有那么一点点帮助,请点个赞,给予一下心灵安慰哈哈哈~
ps:觉得还有那么一点点帮助,请点个赞,给予一下心灵安慰哈哈哈~
ps:觉得还有那么一点点帮助,请点个赞,给予一下心灵安慰哈哈哈~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值