美文网首页
react-native image 设置默认图片

react-native image 设置默认图片

作者: 小西瓜简书 | 来源:发表于2018-12-27 14:59 被阅读0次

    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:觉得还有那么一点点帮助,请点个赞,给予一下心灵安慰哈哈哈~

    相关文章

      网友评论

          本文标题:react-native image 设置默认图片

          本文链接:https://www.haomeiwen.com/subject/iqwrlqtx.html