React/Ionic:不通过 <img/> 标签渲染 SVG

Posted

技术标签:

【中文标题】React/Ionic:不通过 <img/> 标签渲染 SVG【英文标题】:React/Ionic: Not rendering SVG via <img/> tags 【发布时间】:2021-06-27 19:25:57 【问题描述】:

我似乎在我的 React/Ionic 应用程序中加载 SVG 时遇到了问题。我通过 OpenWeatherMap 获取天气并通过 weather?.weather[0].icon 访问要使用的图标我正在使用以下图标包 https://github.com/basmilius/weather-icons 但是当我插入上面的内容时,它不会呈现我正在使用的 SVG 图标 &lt;img src=`../images/$weather?.weather[0].icon.svg`/&gt; 但它一直显示它,就像图像丢失一样。

图片在与本页同根目录的images目录中

Page is in src/pages
Image is in src/images  

有人对为什么会这样有任何提示吗?

包中的一个示例 SVG 是:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><circle cx="32" cy="32" r="11.64" fill="#f4a71d"/><path fill="none" stroke="#f4a71d" stroke-linecap="round" stroke-miterlimit="10" stroke- d="M32 15.71V9.5M32 54.5v-6.21M43.52 20.48l4.39-4.39M16.09 47.91l4.39-4.39M20.48 20.48l-4.39-4.39M47.91 47.91l-4.39-4.39M15.71 32H9.5M54.5 32h-6.21"/><animateTransform attributeName="transform" dur="45s" from="0 32 32" repeatCount="indefinite" to="360 32 32" type="rotate"/></g></svg>

【问题讨论】:

【参考方案1】:

可以在此处找到有关如何解决此问题的快速提示 --> https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/

我认为问题出在 SVG 本身。 如果您在浏览器中打开 SVG 并检查代码,您将看到 svg 仅包含一个 base64 编码的 PNG http://staging.flagstaff.ab.ca/templates/base/images/page-bg.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 1922 432">
  <image id="Swoosh"   xlink:href="data:img/png;base64,=====LONG BASE 64 ENCODE HERE=====" >
</svg>

也许某些浏览器/操作系统在以这种方式呈现 svg 时存在问题。

由于它不是真正的 SVG,只需将其转换为 PNG 并改用 png。 或者通过更改将base64直接包含在您的css中

background-image: url('your-file.svg');
with

background-image: url('data:img/png;base64,=====LONG BASE 6

所以...

xlink:href="data:img/png;base64,

到:

xlink:href="data:image/png;base64,

查看此回复 --> Chrome not rendering SVG referenced via <img> element

【讨论】:

【参考方案2】:

问题

您需要更改导入图像的方式:

1.从同一源目录导入图像:

import Img from "/path/to/image.svg"

<img src=Img/>

2。从公用文件夹导入图像:

<img src="/path/to/image.svg"/>

解决办法:

如果你想动态导入图片并且你使用Webpack,你可以使用require.context:

const svgDir = require.context("!@svgr/webpack!../images");

然后:

<img src=svgDir(`./$weather?.weather[0].icon.svg`)/>

【讨论】:

以上是关于React/Ionic:不通过 <img/> 标签渲染 SVG的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 不渲染通过 <img> 元素引用的 SVG

在不删除 <img> 的情况下发送 HTML 电子邮件意图?

sql查询不更新img文件路径

通过 <img>-tag 注入 javascript

通过 img 嵌入时将 SVG 定位到左侧

通过 PHP 循环动态添加 <img> 标记,通过在每个循环上调用 JavaScript 函数