一些 SVG 圖像網址未加載 - 反應原生 svg uri

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 圖像。 生成相同的 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>