【问题标题】:React renders blank svg imagesReact 渲染空白 svg 图像
【发布时间】:2021-08-01 17:46:09
【问题描述】:

我创建了一个 svg 图像以在 React 中使用,并将其保存到 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>

【问题讨论】:

    标签: reactjs svg


    【解决方案1】:

    只需将 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>
      );
    }
    
    

    【讨论】:

      猜你喜欢
      • 2017-06-21
      • 2020-03-23
      • 2021-09-05
      • 2022-01-23
      • 1970-01-01
      • 1970-01-01
      • 2018-03-21
      • 1970-01-01
      相关资源
      最近更新 更多