通过uri的图像未显示答案

【问题标题】：Image via uri not being displayed通过uri的图像未显示
【发布时间】：2018-03-13 14:19:01
【问题描述】：

我有以下 React Native 组件，我试图在 Android 模拟器中显示一些文本和图像。

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

export default class ListItem extends React.Component {
    render() {
        return (
            <View>
                <Text> "Some text" </Text>
                <Image
                  source={{uri: "https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png"}}
                />
            </View>
        );
    }
}

文本显示正确，但图像未显示。图片的uri 是正确的。

知道可能是什么问题吗？

【问题讨论】：

外部图片需要提供{width, height}。更多信息可以查看here

标签： javascript android react-native jsx

【解决方案1】：

与静态资源不同，对于网络资源，您需要手动指定图像的尺寸。

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

有关图像资源的更多信息，请查看官方文档： https://facebook.github.io/react-native/docs/images.html#network-images

【讨论】：