Verwenden von Bild mit https

Question

Wenn ich diesen Code (sehr ähnlich dem Code hier https://facebook.github.io/react-native/docs/image.html) mit dem Befehl reactive-native run-ios ausführen das Bild head_logo.png Bild nicht angezeigt. Wie kann ich dieses Bild anzeigen?

import React, { Component } from 'react'; 
import { AppRegistry, View, Image } from 'react-native'; 

export default class DisplayAnImage extends Component { 
    render() { 
    return (
     <View> 
     <Image 
      style={{width: 50, height: 50}} 
      source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}} 
     /> 
     <Image 
      style={{width: 66, height: 58}} 
      source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}} 
     /> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('DisplayAnImage',() => DisplayAnImage); 

Answer 1

Es erscheint, es ist nur weiß und hat einen transparenten Hintergrund. Versuchen Sie, einen roten Hintergrund zu Ihrer Wurzel <View>

hier in diesem Snack sehen, es funktioniert wie ein Charme

https://snack.expo.io/By6iSVCeM

Answer 2

Ihr Bild ist erscheinen aber Bild Farbe selber wie Ihre Hintergrundfarbe. So wird es in der Ansicht nicht richtig angezeigt.

So können Sie Hintergrundfarbe zu Bild oder Ansicht geben. So kann es richtig angezeigt werden.

<Image 
      style={{width: 50, height: 50, backgroundColor: 'grey', resizeMode: 'center'}} 
      source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}} 
/> 

Answer 3

Das ist, weil Sie weißes Bild und Ihr Hintergrund ist weiß verwenden

einfach backgroundColor:'#000' zu <View>

gelten