javascript - React/Ionic：通过标签无法渲染 SVG

我似乎在我的 React/Ionic 应用中加载 SVG 时遇到了问题。我是通过 OpenWeatherMap 获取天气，并通过这个 weather?.weather[0].icon 访问使用哪个图标。我正在使用以下图标包 https://github.com/basmilius/weather-icons，但当我插入上面的代码时，它无法渲染 SVG 图标。我是这样使用它的：<img src={`../images/${weather?.weather[0].icon}.svg`}/>，但是它仍然显示图片缺失的样子。

这些图片位于 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-width="3" 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

问题

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`)}/>

答案＃2

关于如何解决这个问题的一个快速提示可以在这里找到 --> 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" width="1922" height="432" viewBox="0 0 1922 432">
  <image id="Swoosh" width="1922" height="432" 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 不渲染通过元素引用的 SVG

javascript - React/Ionic：通过 标签无法渲染 SVG

答案＃1

问题

解决方案：

答案＃2

javascript - React/Ionic：通过标签无法渲染 SVG