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

【问题标题】：some SVG image urls not loading - react native svg uri一些 SVG 图像 url 未加载 - 反应原生 svg uri
【发布时间】：2021-05-25 11:30:42
【问题描述】：

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

考虑以下sn-p，

<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”。

但是上面代码sn-p中使用的URL是在浏览器中加载图片。但是使用本机反应，SVG URL 没有加载。使用 URL 时出现空格渲染。

感谢您的任何建议。

【问题讨论】：

可能是CORS 问题。请尝试使用具有相同来源的 svg 文件或尝试使用 crossorigin 属性
如果查看每个文件的来源，seafood.svg 使用简单的行路径，而vegetarian.svg 使用一组行路径，则此包可能无法解析该组

标签： javascript reactjs react-native svg react-native-svg

【解决方案1】：

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

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

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

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

...

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

它没有显示。

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

所以，如果您的 SVG 文件的代码中有 <style> 标记和一些 CSS，那么您可能遇到了与我相同的问题。并且你应该尝试生成相同的 SVG 没有这个标签。

SVG 成功的文件标签是：

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

SVG 加载文件标签有问题：

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

【讨论】：