我正在使用一个svg图像导入,从一个文件夹,但它显示为空,然后我尝试ti给予路径直接,但它没有解决这个问题。
image.svg
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 480 360">
<defs><linearGradient id="a" x1="19.5%" x2="77.5%" y1="71.8%" y2="16.7%">
<stop offset="0%" stop-color="#00AB55"/><stop offset="100%" stop-color="#00AB55" stop-opacity="0"/>
</linearGradient></defs>
<path fill="url(#a)" d="M0 198.8c0 41.4 15 79.2 39.5 107.8A151.3 151.3 0 0 0 154.3 360a148.4 148.4 0 0
0 56.5-11c9-3.7 19.1-3.3 28 1a75.8 75.8 0 0 0 33.9 8 75.9 75.9 0 0 0 50.8-19.3 34.4 34.4 0 0 1 22.9-8.4h.1a129
129 0 0 0 74.5-23.7c19-13.4 34.5-31.7 44.9-53.3 9-18.7 14.1-40 14.1-62.3
0-77-59.8-139.3-133.5-139.3-7.5 0-14.9.6-22 1.9a107 107 0 0 0-92-53.6 103.7 103.7 0 0 0-45.9 10.7c-13.2 6.4-25
15.7-34.6 26.9-32.7.5-63 11.7-87.7 30.3C25.3 97.2 0 144.9 0 198.8z" opacity=".2"/><image height="300" x="322"
y="30" href="/assets/illustrations/characters/character_2.png"/><path fill="url(#b)" d="M216.3 138v108.3a4 4 0
0 1-4 4H195a4 4 0 0 1-4-4V138a4 4 0 0 1 4-4h17.3a4 4 0 0 1 4 4zm-55-68H144a4 4 0 0 0-4 4v176.3a4 4 0 0 0
4 4h17.3a4 4 0 0 0 4-4V74a4 4 0 0 0-4-4zm102 93H246a4 4 0 0 0-4 4v75.7a4 4 0 0 0 4 4h17.3a4 4 0 0 0 4-4V167a4
4 0 0 0-4-4z"/><path fill="#005249" d="M359.2 253.4a207 207 0 0 1-3.7 9.7l-15.2.4c-3.3.1-6.9.2-9.6 2.1-5.2 3.6-.7
6.1-1.3 9.6-.7 4.2-4.9 5.1-9 5.1-14.1.1-27.7 4.6-41.5 7.3s-28.9 3.5-41.2-3.4c-.8-.5-1.7-1-2-2-.6-1.6.9-3.2 2.3-4.2
3.2-2.2 6.7-3.7 10.5-4.5 2.2-.5 4.5-.8 6.5-2 1.9-1.2 3.3-3.7 2.3-5.8-32.1 2-64.1 4.8-96 8.4-41.1 4.8-81.8 12.9-123
15.9h-.4c-2.9-2.9-5.5-6-7.9-9.3l.6-.7c2-2.2 5-3.2 7.8-4.1 15.9-4.9 32.4-7.4 48.8-9.9 81.6-12.3 164.2-21.1 246.8-15.3a359
359 0 0 1 25.2 2.7z" opacity=".2"/><path fill="#DFE3E8" d="m81.7 204.2 74 11v60.7h8.5v3.6h-19.5v-2.3h8.7v-50.3l-70-13.
5v49h9.7v1.7H73.6V262h8.2v-57.8h-.1z"/><path fill="#C4CDD5" d="m80.6 204.2 74 11v60.7h8.5v3.6h-19.5v-2.3h8.7v-50.3l-70-13.
5v49H92v1.7H72.4V262h8.2v-57.8z"/><defs>
<linearGradient id="b" x1="140" x2="276.5" y1="98" y2="312.5" gradientUnits="userSpaceOnUse"><stop stop-color="#C8FACD"/>
<stop offset="1" stop-color="#007B55"/></linearGradient></defs></svg>
第一次我导入的图像时,它不工作,我给直接路径在源代码,
// import { girlFlyIcon } from '../../utils/appSvg';
<Grid item>
<img src='../../svg/image.svg'
style={{
opacity: '0.8',
zIndex: '999'
}} alt='' />
</Grid>
如何解决这个问题....提前感谢...
2条答案
按热度按时间yyhrrdl81#
在
img
的src
属性中使用require
,如下所示lyr7nygr2#
尝试使用svg作为组件,而不是使用image