如何从反应中的 public 文件夹中获取 svg

在 React 项目中，静态文件通常存储在 public 文件夹中。在需要使用这些文件时，我们需要通过路径来获取它们的 URL。

下面是获取 public 文件夹中的 SVG 文件的步骤：

1. 在 public 文件夹中创建一个名为 svg 的子文件夹，并将 SVG 文件保存在其中。
2. 在代码中使用 process.env.PUBLIC_URL 来获取 public 文件夹的 URL。
3. 将 SVG 文件的路径添加到 process.env.PUBLIC_URL 后面以获取 SVG 文件的 URL。

以下是示例代码：

import React from 'react';

const MyComponent = () => {
  const svgUrl = `${process.env.PUBLIC_URL}/svg/my-svg-file.svg`;

  return (
    <div>
      <h1>My SVG Example</h1>
      <img src={svgUrl} alt="My SVG"/>
    </div>
  );
};

export default MyComponent;

这段代码在页面上显示一个标题和一个 SVG 图像。注意 src 属性使用了上文提到的 svgUrl。

如果你需要在 React 组件中动态地加载 SVG 文件，你可以使用 fetch API 发起网络请求来获取它们。以下是示例代码：

import React, { useEffect, useState } from 'react';

const MyDynamicComponent = () => {
  const [svgData, setSvgData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`${process.env.PUBLIC_URL}/svg/my-dynamic-svg-file.svg`);
      const data = await response.text();
      
      setSvgData(data);
    }

    fetchData();
  }, []);

  return (
    <div>
      <h1>My Dynamic SVG Example</h1>
      {
        svgData && <div dangerouslySetInnerHTML={{__html: svgData}} />
      }
    </div>
  );
};

export default MyDynamicComponent;

在这个例子中，我们使用了 useState 和 useEffect hooks 来获取 SVG 文件的数据。一旦数据准备好，我们使用 dangerouslySetInnerHTML 来在页面上呈现 SVG 图像。

以上就是如何从 React 项目的 public 文件夹中获取 SVG 文件的方法。省略号表示还有其他需要补充的部分，如有需要，请自行添加。