非常奇怪的反应原生图像问题

Question

I have an avatar component... Which returns this...

return (
    <View style={{flex:1, alignItems:'center',marginTop:-10}}>
        <Image source={{uri: this.state.avatar}} />
        <Text style={styles.profileHeader}>
            {this.state.username} 
        </Text>
    </View>
    )

I then am using this avatar by passing the username and avatar as props. This works fine...

   return (
        <View>
          <AvatarHeader   username={d.test_username} avatar={d.test_avatar} />
        </View>     
    );

Now for the weird part. If I do this...

   return (
        <View>
          <Image source={{uri: d.test_avatar}}  />
          <AvatarHeader   username={d.test_username} avatar={d.test_avatar} />
        </View>     
    );

The Image doesn't display. The AvatarHeader still displays, but the Image wont. Even though in the AvatarHeader, its literally the exact same image URL being passed.

(And yes, I AM including 'Image' as a require on the main page)

Answer 1

I too found out something weird using react-native - realized what is wrong.

When you import an image as a file, the image will show no problem (without setting its size) for example:

<Image source = {require('./img.jpeg')}/>

However if you set the image source from a uri, then the image will not show unless you set the image size on stylesheet.

<Image source = {{uri: this.state.uri}}/>

The reason is that when the image is imported, the size comes with it. but when you use uri, the size is undefined.