reactjs - 有没有办法将 svg 添加到我的 img 标签？即使 svg 的路径正确，svg 也不会显示

Question

这是 svg，下面是代码的图片。我使用样式化的组件。这就是为什么我的 img 标签是 Image。

它只显示替代文本。我也使用反应

标签： reactjssvg

Answer 1

要在 React 中添加 SVG，您需要使用import/ require。

您可以直接在 JavaScript 模块中导入文件。这告诉 webpack 将该文件包含在包中。与 CSS 导入不同，导入文件会为您提供一个字符串值。该值是您可以在代码中引用的最终路径，例如图像的 src 属性或 PDF 链接的 href。

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}
export default Header;