Javascript 某些SVG图像URL未加载-反应本机SVG uri

我正在使用“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正在浏览器中加载图像。但是使用react native时，SVG URL不会加载。使用URL时会出现空白呈现

---

感谢您的建议。

使用react原生svg库（）

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

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

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

...

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

从'react native svg'导入{SvgUri}；
...

它没有显示

直到现在，我还没有弄清楚为什么会发生这种情况，但幸运的是，我有了另一种生成SVG图像的方法。在没有

标记的情况下生成相同的SVG图像，对我来说效果很好

因此，如果您的SVG文件的代码中有带有CSS的

标记，那么您可能遇到了与我相同的问题。您应该尝试生成没有此标记的相同SVG

SVG成功文件标记为：

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

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

加载文件标记时出现问题的SVG包括：

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

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

…这里有一些CSS代码样式。。。

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