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

Question

我需要什么:我正在尝试显示来自外部文件夹的 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;

我遇到了错误

Module not found: You attempted to import ../public/svgfolder/0.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

这里我需要3样东西

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

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

它正在工作，如果同样使用本地文件则不是

如果你把svg单个文件放在src文件夹下，那么单个文件就可以显示了

Answer 1

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

可能的解决方案可能是:

• 将您的 svg 移动到 src 目录中(推荐)。

• 使用公用文件夹并像这样访问它。 ( Using 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;