React Native 中的 URI 与 URL [英] URI vs URL in React Native

问题描述

在 react-native 中可以做到:

In react-native one can do:

const somePath = 'https://...'
<Image source={somePath} />

或

const somePath = 'https://...'
<Image source={{uri: somePath}} />

根据我对网址的理解，URI 是 URL 和 URN 的超集.

From what I understand about web addresses is that URIs are a superset of URLs and URNs.

问题

1. 将网址作为 URL 提供给 source 会带来哪些潜在问题?

2. 将网址作为 URI 提供给 source 有哪些潜在问题?

1. What are the potential problems associated with supplying a web address to source as a URL?

2. What are the potential problems associated with supplying a web address to source as a URI?

哪种向源提供图像地址的方法更准确、更安全且面向未来?

Which method of supplying an address of an image to source is more accurate, safer, and future proof?

推荐答案

您提供的第一个代码示例不起作用

The first code example you provided won't work

const somePath = 'https://...'
<Image source={somePath} />

一般来说，你应该使用 source prop 来提供像这样的本地图像

In general general you should use the source prop to provide a local image like so

const someLocalImage = require("./assets/someImageName.png");
<Image source={someLocalImage} />

和显示远程图像的uri

and the uri to display a remote image like so

<Image source={{uri: "https://example.com/someRemoteImagePath.png" />

也可以使用uri来显示base64图片数据

You can also use the uri to display base64 image data

<Image
      source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
    />

在文档中阅读更多相关信息

Read more about it in the documentation

https://facebook.github.io/react-native/docs/image.html#source

这篇关于React Native 中的 URI 与 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！