时间戳

首页 > 解决方案 > 无法使用 React js 从本地文件夹显示 svg

javascript - 无法使用 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;

我得到以下错误

未找到模块：您尝试导入项目 src/ 目录之外的 ../public/svgfolder/0.svg。不支持 src/ 之外的相对导入。

在这里我需要三样东西

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

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

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

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

标签： javascriptreactjssvg

解决方案

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

可能的解决方案可能是：

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

  • 使用公用文件夹并像这样访问它。（使用公用文件夹）

.

// 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;

推荐阅读