Question

我正在使用“react-native-svg-uri”库从云端加载 svg 文件。

考虑以下片段，

<SvgUri
          width={wp("6%")}
          height={wp("6%")}
          source={{ uri: "https://wasfatimages.s3.ap-south-1.amazonaws.com/contain/vegetarian.svg" }}
        />

这个特定的 SVG 文件 URL 不起作用。但是使用相同的 URL，我可以在浏览器中看到预期的图像。

考虑下面的另一个 SVG 文件 URL，它可以很好地使用相同的代码。

“https://wasfatimages.s3.ap-south-1.amazonaws.com/contain/seafood.svg”。

但是上面代码片段中使用的 URL 是在浏览器中加载图像。但是对于本机反应，SVG URL 不会加载。使用 URL 时出现空格渲染。

感谢您的任何建议。

Answer 1

使用 react-native-svg 库 (https://github.com/react-native-svg/react-native-svg)

您可以直接从 URL 或本地加载 SVG 图像。

我遇到的问题是：如果我的项目中有本地 SVG 文件，图像加载正常，但如果我将 SVG 文件添加到其他存储库并使用以下命令请求它：

import { SvgUri } from 'react-native-svg';

...

<SvgUri
        width="100%"
        height="100%"
        uri="https://resources.myproject/image.svg"
/>

它没有显示。

直到现在我还没有弄清楚为什么会发生这种情况，但幸运的是我有另一种方法来生成 SVG 图像。生成没有 <style> 标记的相同 SVG 图像，对我来说效果很好。

因此，如果您的 SVG 文件在其代码中包含带有一些 CSS 的 <style> 标记，那么您可能遇到了与我相同的问题。并且您应该尝试生成没有此标记的相同 SVG。

SVG 成功文件标签是：

<svg>
<g>
<path/>
<line/>
<g/>
<svg/>

加载文件标签有问题的SVG是：

<svg>
<defs>
<style>
...some CSS code style here...
</style>
</defs>
<g>
<path/>
<line/>
</g>
</svg>

一些 SVG 图像 url 未加载 - 反应原生 svg uri

1 个答案: