react native是否支持base64编码的图像？答案

【问题标题】：Does react native support base64 encoded images?react native是否支持base64编码的图像？
【发布时间】：2015-03-31 23:26:29
【问题描述】：

React Native 支持 base 64 编码的图像吗？

我试过了：

<Image source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII='}} style={styles.image}/>

但它没有工作。我只是做错了还是不支持？

【问题讨论】：

reactnative.dev/docs/image
用于反应原生网络，未加载相同的图像从 api 获取多个图像 base64
var array1 = ['./img1', './img2', './img3']; array1.forEach(e =>{ // console.log(require(${e}) array1=require(${e}); console.log(array1) });

标签： react-native

【解决方案1】：

我认为 Ramsay 是错误的，react native 完全支持 base64 图像。我找到了这个

https://facebook.github.io/react-native/docs/tabbarios.html

这是一个如何创建 iOS TabBarController 的官方示例，他们使用 base64 图像作为 TabBar 的图标之一。

我认为您没有在<Image/> 的style 属性中指定width 和height。

我尝试在我的 React Native Playground 中使用你的 base64 图像，它可以工作。

用法

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';

并以这种方式使用

<Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>

【讨论】：

不过它不支持base64 svg，那真的很棒
使用 base64 图像是个好主意吗？肯定会极大地影响差异算法的性能。
对我来说仍然没有运气，在 webplayer 上为我工作的相同代码无法在我的模拟器上呈现图像。
需要添加子属性，比如isStatic: true，例子
@Hoffmann 如果 base64 图像道具包装在一个对象中，则差异永远不会比较 base64 字符串本身，这将避免这个问题

【解决方案2】：

是的，它支持。

试试下面在iOS及以下版本中测试 “反应”：“16.9.0”， "react-native": "0.61.2",

const base64Image = '...';
<Image source={{uri: `data:image/jpeg;base64,${base64Image}`}} />

如果还是不行。检查图像类型，即 jpeg、png 等。

希望有帮助:)

【讨论】：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==}} style={{ flex: 0.2,width:55, height:55, resizeMode: 'contain' }} /> 用于网络工作 if我为 gmail appicon 或任何用于 web 的动态 base64 设置不工作

【解决方案3】：

 <Image
     source={{
        uri: `data:image/jpeg;base64,${this.state.barcodeImage}`,
     }}
     style={{height: 200, width: 250}}
 />

注意：在图片中添加样式

【讨论】：

【解决方案4】：

   <Image
        style={{widht:"20" , height:"20%"}}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />

【讨论】：

你好，最好加一些解释，而不是只加代码。
如您所愿，您可能会从 REST API 调用中获取编码的图像数据。您可以使用“数据：”URI 方案来使用这些图像。与网络资源一样，您需要手动指定图像的尺寸。这次希望你能理解。
但是如果经过所有这些解释，你还是不明白，你可以检查这个reactnative.dev/docs/images和这个codegrepper.com/code-examples/javascript/…。

【解决方案5】：

如果遇到图片不出现的问题，尝试将图片的base64保存为一个状态，然后使用

const [base64Image, setBase64Image] = useState<string>(BASE64DATA)

//... your code

<Image
    source={{
        uri: `data:image/jpg;base64,${base64Image}`
    }}
    resizeMode="cover"
    style={styles.profilePicture}
/>

重要提示：进一步检查 URI 中的“jpg”是否与您的图片扩展名相同

【讨论】：

【解决方案6】：

我认为这不受支持。除非 URL 包含“http”或“https”，否则它会被视为“静态”图像。通过代码挑选，最终图像的实例化归结为：

if ([path isAbsolutePath]) {
  image = [UIImage imageWithContentsOfFile:path];
} else {
  image = [UIImage imageNamed:path];
  if (!image) {
    image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:path ofType:nil]];
  }
}

一步一步：

如果 URL 是绝对路径，则将其作为文件加载
否则，如果图像已缓存 (imageNamed)，则加载该图像
如果图像是相对路径，则从应用程序包中加载它

显然这些都与 base64 无关。我为此功能创建了一个拉取请求，您可以在此处查看：

https://github.com/facebook/react-native/pull/576

【讨论】：

谢谢。我认为这可能非常有用，因为它将允许使用生成 base64 图像的 js 库。例如，我目前想生成一个简单的图表。