我似乎在React/Ionial应用程序中加载SVG时遇到了一个问题。我正在通过OpenWeatherMap获取天气,并通过此weather?.weather[0].icon
访问要使用的图标我正在使用以下图标包https://github.com/basmilius/weather-icons但是当我插入上面的内容时,它并没有像我使用的那样呈现SVG图标<img src={`../images/${weather?.weather[0].icon}.svg`}/>
,但它一直显示它,就像图像丢失一样。
图像在图像目录中,该目录与此页面具有相同的根目录
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.从同一源目录导入图像:
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`)}/>
关于如何解决此问题的快速提示可以在此处找到-->https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/
我认为问题出在SVG本身。如果您在浏览器中打开SVG并检查代码,您将看到SVG只包含一个base64编码的PNGhttp://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>
也许有些浏览器/OS在以这种方式呈现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没有渲染通过<img>元件