React 教程中的图像未加载答案

【问题标题】：Image Not Loading in React TutorialReact 教程中的图像未加载
【发布时间】：2017-07-24 00:38:09
【问题描述】：

有谁知道为什么图片可能无法加载？ index.ios.js 在下面，其余代码只是从

生成的

react-native init TestApp

我不确定开始和结束标签是错误的还是什么。当我将图像放入浏览器时，图像似乎已加载。

    import React, { Component } from 'react';
var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

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

export default class TestApp extends Component {
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />      
        </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

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

【问题讨论】：

看起来不错。您是否尝试过将 URI 字符串直接放入 Image 标签而不是从对象变量中提取？
图片显示没有任何问题，在snack.expo.io/BkuFE0MI-查看结果

标签： javascript reactjs react-native

【解决方案1】：

添加到您的 Info.plist

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

【讨论】：

【解决方案2】：

问题是您尝试从 http 连接加载图像，而不是从苹果推荐的 https 连接加载。

您可以按照 Kawatare267 的回答编辑 info.plist 来修复它

您可以在此处查看更多详细信息

希望这会有所帮助。

Can't show Image by URI in React Native iOS Simulator

【讨论】：