美文网首页
IOS下Image标签加载网络图片不显示

IOS下Image标签加载网络图片不显示

作者: sayyid | 来源:发表于2016-12-24 13:32 被阅读4642次

    学习React Native的组件的Image标签的时候,发现加载网络图片的时候和官方代码写的一模一样,但是图片就是出不来。

    我的代码:

    <Image
        style={styles.image}
        source={{uri: 'http://www.qq1234.org/uploads/allimg/150420/100A5G63-1.jpg'}}/>
    

    官方代码:

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

    查资料发现ReactNative中文网原文有点出入,有点手动删节的意思:

    [ReactNative中文网](http://reactnative.cn/docs/0.39/images.html#content) [原文](http://facebook.github.io/react-native/docs/images.html)

    可以很明显的看到,ReactNative中文网对原文内容出入还是比较大的,在原文上写出了在IOS平台因为存在App Transport Security问题,所以需要特备注意,并且给出了链接说明:

    大意是IOS 9以上的设备中因为App Transport Security的存在,它会拒绝所有不通过HTTPS发送的HTTP请求,因为图片服务器是http请求,所以导致图片无法显示。所以访问非https的地址需要在Info.plist进行ATS设置,那么手动修改了一下,但是并没有找到NSAllowsArbitraryLoads这个项,可能是XCode版本问题?因为我是Android原生开发者,对IOS不是非常熟悉,尝试了半天最后我是这么解决的:

    • App Transport Security Settings 下新建 Allow Arbitrary Loads 条目,并设置值为YES.
    Info.plist设置

    然后重新部署,OK 解决,图片顺利显示出来了。

    相关文章

      网友评论

          本文标题:IOS下Image标签加载网络图片不显示

          本文链接:https://www.haomeiwen.com/subject/joilvttx.html