Question

使用svg-s时我不是专家，但是到目前为止，我在React应用程序中加载svg并没有遇到任何问题。我从外部链接源获取svg，并希望将其与svg标签一起使用，而不是仅与image标签一起使用，因为使用图片标签时，尺寸设置还有另一个问题。问题是SVG没有显示在浏览器中。这是我的svg代码`

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <use linkHref="https://restcountries.eu/data/rus.svg" className="country__flag" width='300' height='100'></use>
</svg>

控制台中没有错误。 svg存在于DOM中，但未显示。我想在运行时导入它。 App是关于搜索国家/地区和获取其标志的，因此，当用户搜索特定国家/地区时，我会从服务器发出请求，然后将其发送给客户端。我应该在webpack中为svg添加一些测试规则吗？

Answer 1

使用

<embed className='yourClassForCss' src="https://restcountries.eu/data/rus.svg">

如果这是指向您网站的链接，请确保它是静态文件夹（可处理svg）。

如果这是其他网站的网址，则不需要在webpack中使用规则

在React App中加载SVG外部链接源

1 个答案: