如何在react native中显示｛data:image/svg+xml;base64〔codes〕｝

Question

我是React native的新手，我尝试使用'data:image/svg+xml;base64,...'作为Image标记，但它没有出现。

我正在使用一个API，它将这些字符串返回给我：

<img src="data:image/svg+xml;base64,PHN2ZyBpZD...">

我对从API收到的字符串进行了更改。实际上，我用"替换了<img src="，用"替换了">，字符串转换为"data:image/svg+xml;base64,PHN2ZyBpZD..."。我在<Image source={{uri: 'converted string'}}/>元素中使用了这个转换后的字符串。但它不起作用，也没有给我看图像。

我搜索了整个网络，也搜索了SO。但现有的问题和主题都是关于"如何在react native中使用.svg文件。所以我无法从他们那里得到帮助。我想在我的RN项目中使用一些像"data:image/svg+xml;base64,PHN2ZyBpZD..."一样的data uri。解决方案是什么？

Answer 1

总是有办法解决问题的。

我的建议是安装https://www.npmjs.com/package/react-native-base64React原生base64。

然后，您可以解码base64并渲染svg，该svg将由react原生图像开箱即用地处理。

Answer 2

非常有趣。因为我也用过这个图书馆。但我没有得出结论。我为使用库编写的代码如下：

---

import React, { Component } from 'react';
import { Image } from 'react-native';
import base64 from 'react-native-base64';

const apiSimulate = [
'<img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDYwIDYwIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGlkPSJQYWdlLTEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgaWQ9IjAwOS0tLVNwaWNlLVN0YWxsIiBmaWxsPSJyZ2IoMCwwLDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGlkPSJTaGFwZSIgZD0ibTU3IDUwaC0xdi0xNi40MjhjLjU3MzA5NjktLjI0OTc3NDggMS4wOTU2OTEtLjYwMjIzNzggMS41NDItMS4wNC45MzM4ODktLjkzODI0MzMgMS40NTgxMjMyLTIuMjA4MTk5IDEuNDU4LTMuNTMyLS4wMDI2NDEtLjg0Mjc2NDMtLjI0NTQ2MTgtMS42NjczMTQ0LS43LTIuMzc3bC00Ljk4OC03LjgzNWMtMS4wOTg3MDQ1LTEuNzI5Njk0Ny0zLjAwMjg2ODYtMi43ODA1MjgtNS4wNTItMi43ODhoLTIuNzM4YzEuNzkwNTUyOC0yLjA3MTU5NjYgMy4yMDQ1Njg0LTQuNDQwNjk4OCA0LjE3OC03IC4yMjY1MDQ5LS41ODgwOTg1Ni4xNzI3NjM1LTEuMjQ3MzUxMDItLjE0Ni0xLjc5MS0uMjc5NDAyNS0uNDcyMTk1ODEtLjczNjE4OTctLjgxMjkwNTk5LTEuMjY4NDQwOS0uOTQ2MTA5NzItLjUzMjI1MTMtLjEzMzIwMzcyLTEuMDk1Njc1Ni0uMDQ3ODE2NDktMS41NjQ1NTkxLjIzNzEwOTcyLTIuNDEzMjU5MiAxLjU3MTgyMDUyLTUuMDA4NjI0NCAyLjg0NDQ4NjM2LTcuNzI5IDMuNzktNC4wNTYxMTM4IDEuMDQ5ODM3NS04LjM2ODA1MDQtLjAyMDgxMDktMTEuNDYyLTIuODQ2LS4xOC0uMTU4LS40MTMtLjM1My0uNjcxLS41NjNsLS4wMTEtLjAwOWMtMS41MTctMS4yMzItNC4yNDgtMy4xNjQtNy4wMDgtMy42MzItMS41NjAxNTk5LS4zMzY4MTc4NS0zLjE4OTg5OC4wMDg4NTEwOC00LjQ3OS45NS0xLjA0Mjg0MDktLjk4NTE5ODctMS44NjUyMTU4LTIuMTgwMDc5MTMtMi40MTMtMy41MDYtLjA5MTU0MDEtLjI3NDkxMjQzLS4yOTc4MjE2LS40OTY2MDQyOC0uNTY1NDM4NC0uNjA3Njc5NjEtLjI2NzYxNjctLjExMTA3NTMzLS41NzAyNTQ5LS4xMDA2MTI1Mi0uODI5NTYxNi4wMjg2Nzk2MS0xLjcwMDAwMDk0IDEuMDMyOTc3MjYtMi45NDkzNjExOCAyLjY2NzQ5NzQyLTMuNSA0LjU3OS0uMTA0MTY0NjEuMzEwOTY1ODEtLjA0OTIzNTkxLjY1MzI0MjU3LjE0Ny45MTYgMS4zMzY5NDE0MSAxLjY0NTAxMjggMy4wNzU2MjI2IDIuOTE3MzM2MTQgNS4wNDggMy42OTQuMDI5NDg1NS42MDU0Mjg1Mi4xMDg0MTUgMS4yMDc0MzM0LjIzNiAxLjguMjQxNzEyNyAxLjA2NjM1ODkuNjQ2NDcyIDIuMDg5MDUwOSAxLjIgMy4wMzIuNDA5MjQ5NS42NzIyOTg1Ljg4NzE0MDggMS4zMDAzMjY3IDEuNDI2IDEuODc0aC00LjM3Yy0yLjA0ODYwOTg3LjAwNTY2OTgtMy45NTMxODQxMiAxLjA1NDYzNjctNS4wNTMgMi43ODNsLTQuOTg3IDcuODQxYy0uNDU0NjYxMjUuNzA5MjU5NS0uNjk3NTAxMTkgMS41MzM1Mjc2LS43IDIuMzc2LjAwMDc1OTc5IDEuMzI4NTI0NC41Mjg3NDEyIDIuNjAyNDQxNCAxLjQ2OCAzLjU0Mi40NDMzNzY2OS40MzQzOTMuOTYyNjIzODEuNzgzODM0MSAxLjUzMiAxLjAzMXYxNi40MjdoLTFjLTEuNDU5NDM3MjYtLjAwMjc2NTQtMi43MDgwODA5NSAxLjA0NzQ4ODEtMi45NTUzODczMiAyLjQ4NTgyMi0uMjQ3MzA2MzggMS40MzgzMzM5LjU3ODgzOTg0IDIuODQ1MzI1NyAxLjk1NTM4NzMyIDMuMzMwMTc4djEuMTg0YzAgMS42NTY4NTQyIDEuMzQzMTQ1NzUgMyAzIDNoNTBjMS42NTY4NTQyIDAgMy0xLjM0MzE0NTggMy0zdi0xLjE4NGMxLjM3NjU0NzUtLjQ4NDg1MjMgMi4yMDI2OTM3LTEuODkxODQ0MSAxLjk1NTM4NzMtMy4zMzAxNzhzLTEuNDk1OTUtMi40ODg1ODc0LTIuOTU1Mzg3My0yLjQ4NTgyMnptLTMgMGgtMnYtMTZoMnptLTkuODY0IDBjMS4yMzIyNTg4LTEuNzU2NDY3OCAxLjg4NDA0MjUtMy44NTQ0ODM5IDEuODY0LTYgMC0yLjI4LTMuMDEtNC03LTRzLTcgMS43Mi03IDRjLS4wMjAwNDI1IDIuMTQ1NTE2MS42MzE3NDEyIDQuMjQzNTMyMiAxLjg2NCA2aC03LjcyOGMxLjIzMjI1ODgtMS43NTY0Njc4IDEuODg0MDQyNS0zLjg1NDQ4MzkgMS44NjQtNiAwLTIuMjgtMy4wMS00LTctNHMtNyAxLjcyLTcgNGMtLjAyMDA0MjUgMi4xNDU1MTYxLjYzMTc0MTIgNC4yNDM1MzIyIDEuODY0IDZoLTUuODY0di0xNi4xYzEuMjAzNDk5OS0uMjUyMDY3OSAyLjI3MTcwMTMtLjkzOTI3NzQgMy0xLjkzLjkzNjA2NjIgMS4yNzI1ODk1IDIuNDIwMjI1OCAyLjAyNTgwMDUgNCAyLjAzaDNjMS41Nzk5NTIxLS4wMDQ0MzM3IDMuMDY0MTQ1Ny0uNzU4MDMzIDQtMi4wMzEuOTM1ODU0MyAxLjI3Mjk2NyAyLjQyMDA0NzkgMi4wMjY1NjYzIDQgMi4wMzFoNGMxLjU3OTk1MjEtLjAwNDQzMzcgMy4wNjQxNDU3LS43NTgwMzMgNC0yLjAzMS45MzU4NTQzIDEuMjcyOTY3IDIuNDIwMDQ3OSAyLjAyNjU2NjMgNCAyLjAzMWgzYzEuNTc5OTUyMS0uMDA0NDMzNyAzLjA2NDE0NTctLjc1ODAzMyA0LTIuMDMxLjcyODI5ODcuOTkwNzIyNiAxLjc5NjUwMDEgMS42Nzc5MzIxIDMgMS45M3YxNi4xMDF6bS05LjYtMi44NzJjMS40MDk0MDk0LjYwMzY2OTIgMi45MzEwMjM4LjkwMDkwMjEgNC40NjQuODcyIDEuNTMxOTY4OC4wMjg0NzYgMy4wNTI1MTYyLS4yNjg3NDgzIDQuNDYxLS44NzItLjUxMiAxLjQ1Ny0xLjUxIDIuODcyLTMuNDYxIDIuODcyaC0yYy0xLjk1MSAwLTIuOTQ5LTEuNDE1LTMuNDYxLTIuODcyem05LjQ2NC0zLjEyOGMwIC44MTYtMS45NDggMi01IDJzLTUtMS4xODQtNS0yIDEuOTQ4LTIgNS0yIDUgMS4xODQgNSAyem0tMjcuNDYxIDMuMTI4YzEuNDA4NDgzOC42MDMyNTE3IDIuOTI5MDMxMi45MDA0NzYgNC40NjEuODcyIDEuNTMxOTY4OC4wMjg0NzYgMy4wNTI1MTYyLS4yNjg3NDgzIDQuNDYxLS44NzItLjUxMiAxLjQ1Ny0xLjUxIDIuODcyLTMuNDYxIDIuODcyaC0yYy0xLjk1MSAwLTIuOTQ5LTEuNDE1LTMuNDYxLTIuODcyem05LjQ2MS0zLjEyOGMwIC44MTYtMS45NDggMi01IDJzLTUtMS4xODQtNS0yIDEuOTQ4LTIgNS0yIDUgMS4xODQgNSAyem0yMC0xNWMwIDEuNjU2ODU0Mi0xLjM0MzE0NTggMy0zIDNoLTNjLTEuNjU2ODU0MiAwLTMtMS4zNDMxNDU4LTMtM3ptLTExIDBjMCAxLjY1Njg1NDItMS4zNDMxNDU4IDMtMyAzaC00Yy0xLjY1Njg1NDIgMC0zLTEuMzQzMTQ1OC0zLTN6bS0yMSAwaDljMCAxLjY1Njg1NDItMS4zNDMxNDU4IDMtMyAzaC0zYy0xLjY1Njg1NDIgMC0zLTEuMzQzMTQ1OC0zLTN6bTQyLjEyOCAyLjExOGMtLjU2NDgyMDcuNTYzNzg5NS0xLjMyOTk1MjUuODgwOTE2NS0yLjEyOC44ODJoLTNjLTEuNjU2ODU0MiAwLTMtMS4zNDMxNDU4LTMtM2g5Yy0uMDAwMTk0OS43OTMzMjcyLS4zMTM1NzY5IDEuNTU0NTAwNS0uODcyIDIuMTE4em0tMTYuNTk1LTE4LjljMi44OTQ5ODU3LS45ODg3NjM1IDUuNjU2MzQzOC0yLjMzMjMyNjYyIDguMjIxLTQgLjAwNiAwIC4wOC4wNTcuMDg2LjA1Ny0xLjE3ODg2MzcgMy4xODM5NDg3LTMuMTMzMTY1OSA2LjAyMzYzMjktNS42ODYgOC4yNjItMS40NTQ5MjQ1IDEuMjE4NTM0Mi0zLjExNzQ3NzkgMi4xNjQ5ODM4LTQuOTA4IDIuNzk0LTUuNzIwOTUxNiAxLjkyNDUwMDUtMTIuMDE2MjIzMiAxLjAxMjY1ODktMTYuOTU2LTIuNDU2LS4yMDYtLjE0Mi0uNDE1LS4zLS42MjMtLjQ0NC4yOTU2ODg0LS42NDEwODc0LjQ2MTIxODYtMS4zMzQ0Nzg5LjQ4Ny0yLjA0IDEuMTIyODA4NS4xNDMwNTIxIDIuMjYzMjU4OC0uMDMwMTEwNyAzLjI5My0uNS4zMzc3NjUzLS4xNjg3Nzg5LjU1MTY2NDQtLjUxMzQxNTcuNTUzLS44OTEtLjEwMDY5NjUtMS4zMTI5Nzk4LS40ODM3NjE3LTIuNTg4NzI2Ny0xLjEyMy0zLjc0IDEuMDkxMDU5NC4wOTk3NDQ0MyAyLjE5MDc2MzMtLjAzODc4NDgyIDMuMjIzLS40MDYuMDM0LjAyOS4wODEuMDY3LjExMi4xIDMuNjAzMjMxNiAzLjI2OTYwNzEgOC42MTQ3NDI4IDQuNDk2ODA4NSAxMy4zMjEgMy4yNjJ6bS0yOS4zOTEtNy40MThjLjMyOTg4MTMtLjgzODI3OTkxLjgyNTgxMy0xLjYwMTIyNTU3IDEuNDU4LTIuMjQzLjY2NDAyNzMgMS4xNDIyNTU5NiAxLjQ3ODI4OTMgMi4xOTAyNjkyOCAyLjQyMSAzLjExNi0uMjc0MTEzOC40NzI0MDczOS0uNDc2MzMyNi45ODMwMDk4OS0uNiAxLjUxNS0xLjIzNDIyNzYtLjU4MTM5NjA1LTIuMzQ2OTExOS0xLjM5MTczMTUyLTMuMjc5LTIuMzg4em02LjE3MiAxLjE5Yy42MzAzNDM4LS41NzEwMDM1MiAxLjQ1NjgxMDUtLjg3NjU4NDg1IDIuMzA3LS44NTMuMjk2MDM4My4wMDEzMDQ2MS41OTE0MzE4LjAyNzczMjc5Ljg4My4wNzkgMS42Mjg4ODA4LjM2NjI3Nzg4IDMuMTY1MjQ4NiAxLjA2Mjk4Njk3IDQuNTE0IDIuMDQ3LS45NDc3NTc3LjA0Mjc4Nzg3LTEuODk3MDU1Mi0uMDM3ODg4OTctMi44MjQtLjI0LS4zOTYzMjI2LS4wNzg2MDg4Ni0uODAxMDEwNS4wODkwMDM5Ny0xLjAyNTY4ODQuNDI0ODE3Ni0uMjI0Njc3OS4zMzU4MTM2NC0uMjI1MTk1NC43NzM4Mzg4Mi0uMDAxMzExNiAxLjExMDE4MjQuNzczNDQ4NyAxLjE1NzQyMDE3IDEuMzYzNDA5MiAyLjQyNzQwMzYgMS43NDkgMy43NjUtLjgyMjcwMTQuMjIzMzY2My0xLjY5Nzk3NDEuMTQ3NTMyOS0yLjQ3LS4yMTQtLjM2MjE0NzgtLjE4MzY1MzQtLjc5OTM5NTQtLjEzMDA4NTQtMS4xMDY0OTg5LjEzNTU1OTFzLS40MjMwODQzLjY5MDYxOTItLjI5MzUwMTEgMS4wNzU0NDA5Yy4xNTMxNDYxLjU5NzgxODkuMTQ0NTE3NyAxLjIyNTYxNTctLjAyNSAxLjgxOS0uNjI3MzU2LS41OTM0NzUxLTEuMTcxMzE0NS0xLjI2OTMwMjMtMS42MTctMi4wMDktLjQ0NjM3NjEtLjc2MzEzNy0uNzczNDg2Ni0xLjU5MDAxODQtLjk3LTIuNDUyLS4zMTctMS40OTEtLjQyNi0zLjUxMi44OC00LjY5MnptLTcuOTM3IDEzLjg2MmMuNzMyMTI0NzctMS4xNTAxMTkxIDEuOTk5NjM0NC0xLjg0ODEzNTEgMy4zNjMtMS44NTJoNi42ODRjLjI0NC4xNzUuNDkuMzU2LjcyOS41MjEgMy41NTk0OTI4IDIuNDY4NzM4NyA3Ljc4NTE5ODcgMy43OTc0NDU1IDEyLjExNyAzLjgxIDIuMjU4NTc4NS4wMDM0NTA2IDQuNTAxNjExMy0uMzczNDg3MSA2LjYzNS0xLjExNSAyLjAyMjQ3NDUtLjcxMDkxNTggMy45MDAxODM4LTEuNzgwNjk4NiA1LjU0My0zLjE1OC4wMjItLjAxOS4wNDItLjAzOS4wNjMtLjA1OGg0Ljc0OWMxLjM2NTQwNjQuMDAzOTMxNCAyLjYzNDQ4NjEuNzA0MDc0MyAzLjM2NiAxLjg1N2w0LjU0NyA3LjE0M2gtOC41bC0xLjc0OC00LjM3MmMtLjIwNTQ0OTktLjUxMzA3MjUtLjc4NzkyNzUtLjc2MjQ0OTktMS4zMDEtLjU1Ny0uNTEzMDcyNS4yMDU0NS0uNzYyNDQ5OS43ODc5Mjc1LS41NTcgMS4zMDFsMS40NTYgMy42MjhoLTguNTIzdi0yYzAtLjU1MjI4NDctLjQ0NzcxNTMtMS0xLTFzLTEgLjQ0NzcxNTMtMSAxdjJoLTEwdi0yYzAtLjU1MjI4NDctLjQ0NzcxNTMtMS0xLTFzLTEgLjQ0NzcxNTMtMSAxdjJoLTguNTIzbDEuNDUyLTMuNjI4Yy4yMDU0NDk5LS41MTMwNzI1LS4wNDM5Mjc1LTEuMDk1NTUtLjU1Ny0xLjMwMS0uNTEzMDcyNS0uMjA1NDQ5OS0xLjA5NTU1MDEuMDQzOTI3NS0xLjMwMS41NTdsLTEuNzQ4IDQuMzcyaC04LjV6bS01LjM3NzAwNjAzIDkuMTQ4aDkuMDAwMDA2MDNjMCAxLjY1Njg1NDItMS4zNDMxNDU4IDMtMyAzaC0zYy0uNzk2MTM4LjAwMTU5NzEtMS41NjAxMjgwMi0uMzEzOTYwNi0yLjEyMzA4MzczLS44NzY5MTYzcy0uODc4NTEzMzQtMS4zMjY5NDU3LS44NzY5MjIzLTIuMTIzMDgzN3ptMy4wMDAwMDYwMyA1aDJ2MTZoLTJ6bTUwIDIzYzAgLjU1MjI4NDctLjQ0NzcxNTMgMS0xIDFoLTUwYy0uNTUyMjg0NzUgMC0xLS40NDc3MTUzLTEtMXYtMWg1MnptMS0zaC01NGMtLjU1MjI4NDc1IDAtMS0uNDQ3NzE1My0xLTFzLjQ0NzcxNTI1LTEgMS0xaDU0Yy41NTIyODQ3IDAgMSAuNDQ3NzE1MyAxIDFzLS40NDc3MTUzIDEtMSAxeiIvPjwvZz48L2c+PC9zdmc+">',
];

var foo = [];
for (let i = 0; i < apiSimulate.length; i++) {
let base64v = apiSimulate[i].replace(`<img src="data:image/svg+xml;base64,`, ``).replace(`">`, ``);
foo.push('"data:image/png;base64,' + base64.encode(base64v) + '"');
}
export default class Explore extends Component { 
render() {
return (
<Image style={{width: 100, height: 100}} source={{ uri: foo[0] }} />
);
}
}