SVG未在反应中显示答案

【问题标题】：SVG not displayed in reactSVG未在反应中显示
【发布时间】：2020-06-21 11:15:32
【问题描述】：

我有一个 svg 文件，我想将其显示为背景图像：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
        <path d="M496.659,312.107l-47.061-36.8c0.597-5.675,1.109-12.309,1.109-19.328c0-7.019-0.491-13.653-1.109-19.328l47.104-36.821    c8.747-6.912,11.136-19.179,5.568-29.397L453.331,85.76c-5.227-9.557-16.683-14.464-28.309-10.176l-55.531,22.293    c-10.645-7.68-21.803-14.165-33.344-19.349l-8.448-58.901C326.312,8.448,316.584,0,305.086,0h-98.133    c-11.499,0-21.205,8.448-22.571,19.456l-8.469,59.115c-11.179,5.035-22.165,11.435-33.28,19.349l-55.68-22.357    C76.52,71.531,64.04,76.053,58.856,85.568L9.854,170.347c-5.781,9.771-3.392,22.464,5.547,29.547l47.061,36.8    c-0.747,7.189-1.109,13.44-1.109,19.307s0.363,12.117,1.109,19.328l-47.104,36.821c-8.747,6.933-11.115,19.2-5.547,29.397    l48.939,84.672c5.227,9.536,16.576,14.485,28.309,10.176l55.531-22.293c10.624,7.659,21.781,14.144,33.323,19.349l8.448,58.88    C185.747,503.552,195.454,512,206.974,512h98.133c11.499,0,21.227-8.448,22.592-19.456l8.469-59.093    c11.179-5.056,22.144-11.435,33.28-19.371l55.68,22.357c2.688,1.045,5.483,1.579,8.363,1.579c8.277,0,15.893-4.523,19.733-11.563    l49.152-85.12C507.838,331.349,505.448,319.083,496.659,312.107z M256.019,341.333c-47.061,0-85.333-38.272-85.333-85.333    s38.272-85.333,85.333-85.333s85.333,38.272,85.333,85.333S303.08,341.333,256.019,341.333z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#295477"/>
</g>
</svg>


.icon {
  background: red;
  width: 50%;
  padding: 20px;
  position: relative;
}

.icon::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 30px;
  width: 30px;
  background: url(test.svg) no-repeat left center;
  background-size: 150%;
}

export default function App() {
  return (
    <div className="App">
      <div className="icon">123</div>
    </div>
  );
}

它只是没有显示，我错过了什么吗？

on line demo

【问题讨论】：

标签： html css reactjs svg

【解决方案1】：

当您的页面被渲染时，浏览器会相对于加载页面的目录获取额外的资源（如 .js/.css/.svg 文件）。

react 工具仅将public/ 目录暴露给浏览器，因此当您加载index.html 时，浏览器将尝试在同一目录中查找您的 SVG 图像。

您可以将文件移动到public/test.svg 或创建符号链接以使其正常工作。演示 - https://codesandbox.io/s/use-svg-sorw2.

【讨论】：

谢谢，这对我有用。但是如果我在 /public 目录下添加一个子目录呢？我试过background: url(img/test.svg) no-repeat left center; 和background: url("/public/img/icon.svg") no-repeat left center; 都不起作用。
你能分享一个你试过的演示链接吗？这样我们就可以看到哪里出了问题。
我认为它现在在演示中运行良好。但在我的项目中，我使用 scss，它总是让我玩./src/rc/Components/SummaryCharts/SummaryCharts.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/rc/Components/SummaryCharts/SummaryCharts.scss) 错误。所以我想使用 symlink ，你能告诉我如何使用 symlink 让它工作吗？
对于浏览器来说，它是符号链接还是文件系统上的实际文件都没有关系。你从哪里得到这个错误？在编译 SASS 时，还是在浏览器中加载页面时？
我在编译 scss 时得到了这个

【解决方案2】：

你可以直接在 react 中加载 SVG：

import mySvg from "./test.svg";

之后可以直接在JSX代码中设置为背景

...
 <div className="icon" style={{ backgroundImage: url(data:image/svg+xml;utf8,${mySvg})` }} />
...

【讨论】：