javascript - 在React应用程序中加载svg外部链接源

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 中但不显示。我想在运行时导入它。应用程序是关于搜索国家并获取他们的国旗，所以当用户搜索某个国家时，我从我的服务器发出请求，然后将其发送到客户端。我应该在 webpack 中为 svg 添加一些测试规则吗？

Answer 1

使用

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

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

如果这是其他网站的 url，则不需要在 webpack 中添加规则