React Native支持Base64编码的图片吗？

Question

React Native是否支持Base64编码的图像？

我尝试过：

<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}/>

但是它没有起作用。我做错了什么还是不支持？

- Dev01

---

https://reactnative.dev/docs/image - Khurshid Ansari

对于 React Native Web，我从 API 获取多个图像的 base64，但同一图像未加载。 - Harsha

var array1 = ['./img1', './img2', './img3'];array1.forEach(e =>{ // console.log(require(${e}) array1=require(${e}); console.log(array1) }); - Omar bakhsh

Answer 1

我认为拉姆齐是错误的，React Native对base64图像有完全支持。我发现了这个。

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

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

我认为您没有在的

- Dicky Tsang

---

然而它不支持base64 svg，这将是非常棒的。 - Jesse

使用base64图像是一个好主意吗？毫无疑问，它会极大地影响差异算法的性能。 - Hoffmann

对我来说仍然没有运气，对于在WebPlayer上有效的相同代码，在模拟器上无法呈现图像。 - Dombi Soma

需要添加子属性，例如 isStatic: true，示例<Image source={{uri: base64Icon, isStatic: true}}/>。 - Somnath Kadam

@Hoffmann 如果将base64图像属性包装在对象中，则差异比较永远不会比较base64字符串本身，这将避免此问题。 - ICW

Answer 2

是的，它是支持的。

请尝试以下内容。 它已在iOS及以下版本中进行了测试 "react": "16.9.0", "react-native": "0.61.2",

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

如果仍然无法正常工作，请检查图片类型，例如jpeg，png等。

希望这可以帮到你 :)

- sahu

---

<Image source={{ uri: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==}} style={{ flex: 0.2,width:55, height:55, resizeMode: 'contain' }} /> 如果我在动态base64中放置gmail appicon或任何内容，则对于Web工作而言，它将无法正常工作。 - Harsha

Answer 3

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

提醒：在图片中添加样式

- Mitesh K

Answer 4

如果您遇到图片无法显示的问题，请尝试将图片的base64编码保存在状态中，然后使用它。

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

//... your code

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

重要提示：此外，请检查URI中的“jpg”是否与您的图像扩展名相同。

- user13071097

Answer 5

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

- Mootassam

---

你好，最好是在添加代码的同时添加一些说明。 - Ahmet Emre Kilinc

你可能会从REST API调用中获取编码的图像数据。你可以使用"data:" URI方案来使用这些图片。与网络资源一样，您需要手动指定图像的尺寸。希望这次表达清晰了。 - Mootassam

但是如果在所有这些解释之后，您仍然不理解， 您可以查看此https://reactnative.dev/docs/images 和此https://www.codegrepper.com/code-examples/javascript/convert+base64+to+image+in+react+native。 - Mootassam

Answer 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]];
  }
}

逐步操作：

1. 如果URL是绝对路径，则加载为文件
2. 否则，如果图像已缓存（imageNamed），则加载缓存图像
3. 否则，如果图像是相对路径，则从应用程序包中加载

显然，这些都与base64无关。我已创建了一个拉取请求，你可以在这里查看：

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

- Colin Ramsay

---

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