美文网首页
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 解决,图片顺利显示出来了。

相关文章

  • 3. Image组件

    Image Image.network(): 加载远程图片Image.asset(): 加载本地图片 显示网络图片...

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

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

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

    IOS 9以上的设备中因为App Transport Security的存在,它会拒绝所有不通过HTTPS发送的H...

  • RN-Image

    ReactNative 图片显示组件 Image 1 介绍 2 加载网络图片 3 加载本地图片 4 代码示例

  • Image

    Image.network(url):从网络加载显示图片、这里需要传入图片的url, Image.file(fil...

  • React Native 关于图片的加载、适配、拉伸

    React Native可以通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。接下来,我们介...

  • weex总结(iOS集成weex)

    1.标签使用本地图片 2. src 网络图片不显示问题 3.weex 调用 oc 比如...

  • ReactNative 关于image的加载

    图片的加载(非原文) 包括从网络、iOS(image.assets)和Android的Drawable文件夹中加载...

  • Flutter学习笔记06-图片

    Flutter中,可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。...

  • Widget-Image

    Image Image.asset:加载资源图片 Image.network:网络资源图片 Image.fi...

网友评论

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

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