React native react native是否支持base64编码图像？

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

---

但它不起作用。我只是做错了还是不受支持？

我认为这是不受支持的。除非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是绝对路径，请将其作为文件加载

否则，如果图像已缓存（ImageName），请加载该图像

否则，如果图像是相对路径，请从应用程序包加载它

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

---

我认为拉姆齐错了，我完全支持base64映像。 我找到了这个

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

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

我想您没有在

的

样式

属性中指定

宽度

和

高度

我试着在我家乡的操场上使用你的base64图像，效果很好

用法

并以这种方式使用

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

---

是，它正在支持。

试试下面 它在iOS及以下版本中进行测试 “反应”：“16.9.0”， “反应本机”：“0.61.2”，

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

constbase64image='…'；

如果仍然不工作。检查图像类型，即jpeg、png等

希望有帮助：）

注意：在图像中添加样式

---

如果您遇到图像未显示的问题，请尝试将图像的base64保存在状态中，然后使用它

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

//... your code

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

const[base64Image，setBase64Image]=useState（BASE64DATA）
//... 你的代码

---

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

谢谢。我认为这可能非常有用，因为它将允许使用生成base64图像的js库。例如，我目前想生成一个简单的图形，但是它不支持base64 svg，这将是一个真正的greatIs，使用base64图像是一个好主意吗？当然，这将极大地影响diffing算法的性能。我仍然运气不佳，在webplayer上为我工作的同一代码无法在我的模拟器上渲染图像。需要添加子属性，如isStatic:true，例如，对于react native web，未加载的同一图像从apivar array1获取多个图像base64=['./img1'，'./img2'，'./img3']；array1.forEach（e=>{//console.log（

require（${e}

）array1=

require（${e}）

；console.log（array1）}）；对于web工作，如果am place dynamic base64 for gmail appicon或任何web not working Hello，则最好添加一些解释，而不是仅添加代码。如您所愿，您可能会从REST API调用获取编码图像数据。您可以使用“data:”URI方案来使用这些图像。与网络资源一样，您也需要o手动指定图像的尺寸。我希望您这次能理解。但是如果在所有这些说明之后，您不理解，您可以检查这个和这个。

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

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

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

//... your code

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