无法使用 React js 显示本地文件夹中的 svg

我需要什么：我正在尝试从外部文件夹显示 svg，该文件夹包含大约 50 个文件，

public folder
  |-images
        -| 50 svgs

在app.js中

我正在尝试显示图像

import React from 'react';
import './App.css';
import svgs from "../public/svgfolder/0.svg"
class App extends React.Component{

   render(){
     return(
       <div>
         <img src={svgs} alt="test"></img>
       </div>
     )
   }
}

export default App;

我遇到以下错误

找不到模块：您尝试导入 ../public/svgfolder/0.svg 它位于项目 src/ 目录之外。相对进口 不支持 src/ 之外的内容。

这里我需要三样东西

1. 我们如何在react中动态显示50个svgs？
2. 有些人建议对网络包进行更改，那么这是正确的方法吗？我的意思是它也可以在生产中使用吗？
3. 我们必须使用公用文件夹或任何其他文件夹吗？
4. React 支持 svg 吗？

注意：如果我通过 url 调用 svg<img src={"https://s.cdpn.io/3/kiwi.svg"}/>,

它正在工作，如果使用本地文件也一样，那就不行

如果你把 svg 单个文件src文件夹，然后单个文件就可以显示

React 不允许访问 src 目录之外的内容以在 React 代码中使用。

可能的解决方案可能是：

• 将 svg 移动到 src 目录中（推荐）。

• 使用公共文件夹并像这样访问它。 (使用公用文件夹 https:////facebook.github.io/create-react-app/docs/using-the-public-folder)

.

// Using Public Folder
import React from 'react';
import './App.css';
class App extends React.Component{
  render(){
    const svgs = ["0.svg", "23.svg",...];
    return(
       <div>
         {svgs.map(svg => 
            <img src={`${process.env.PUBLIC_URL}/svgfolder/${svg}`} alt="test"></img>
         }
       </div>
     )
   }
}

export default App;