将图像与HTTPS一起使用

Question

当我运行此代码（与此处非常相似的代码https://facebook.github.io/reaect-native/docs/image.html）-IOS映像head_logo.png映像未显示。如何显示此图像？

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

这是因为您使用的是白色图像，背景是白色

只需将backgroundColor:'#000'应用于<View>

Answer 2

确实出现，它只是白色，具有透明的背景。尝试在root <View>

中添加红色背景

在此小吃中，请参阅此处，它的工作方式就像魅力

https://snack.expo.io/by6isvcem

Answer 3

您的图像出现，但图像颜色与背景颜色相同。因此，它在视图中无法正确显示。

因此，您可以给图像或视图提供背景颜色。因此它可以正确显示。

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