React 渲染空白 svg 图片

我创建了一个在 React 中使用的 svg 图像,并将其保存到 src 中的一个文件夹中(我使用的是 react-create-app)。然后我尝试导入它:

import  waterDropPathEmpty from "../images/waterDropPathEmpty.svg";

并在组件中使用它

render() {
        return (
            <DataSection color="blue">
                <h3>Water Requirements</h3>
                <svg><img src={waterDropPathEmpty} /></svg>
                

React 组件中的图像是空白的,但是当我单击它并在单独的选项卡中打开图像时,它显示得很好。我尝试了此 post 中的建议,包括作为 ReactComponent 导入,但效果相同。它只是一个高度和宽度合适的空白方块。

这就是 SVG 的样子,以防万一我在文件中遗漏了一些东西 - 这是我自己创建的一个快速而肮脏的测试图像,因为我想创建一些自定义图标:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 200 200">
  <image id="Background" width="200" height="200" xlink:href="data:img/png;base64,iVBORw0KGgoaAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAA8UlEQVR4nO3RqqHAQAwEobT+Pe/Z4DFY4Nu2C+OvwlIIphbmIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphbmIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphbmIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphbmIZhCMIVgCsEUgikEUwimEEwhmEIwhWAKwRSCKQRTCKYQTCGYQjCFYArBFIIpBFMIphDJ3T0IYATEmP4svAAAAABJRU5ErkJggg=="/>
  <image x="44" y="4" width="110" height="171" xlink:href="data:img/png;base64,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"/>
</svg>
addsion 回答:React 渲染空白 svg 图片

直接将 SVG 作为 React 组件导入即可。

参考 - https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

您的 svg 可能有问题,您正在尝试将 png 用于 svg,而 object 标签工作正常。我使用了另一个 svg,效果很好。

Working codesandbox link

import "./styles.css";
import { ReactComponent as Drop } from "./../public/drop.svg";
import logo from "./try2.svg";
import safari from "./safari.svg";

export default function App() {
  return (
    <div className="App">
      <h1>SVG 1 as React component</h1>
      <Drop />
      <h1>SVG 2 using object tag</h1>
      <object type="image/svg+xml" aria-label="logo" data={logo}></object>
      <h1>SVG 3 using img tag</h1>
      <img src={safari} alt="logo" />
    </div>
  );
}

本文链接:https://www.f2er.com/1081.html

大家都在问