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

IT技术 javascript reactjs svg
2021-05-01 04:53:19

我需要什么：我试图从外部文件夹显示 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：您试图导入位于项目 src/ 目录之外的 ../public/svgfolder/0.svg。不支持 src/ 之外的相对导入。

在这里我需要 3 件事

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

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

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

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

4个回答

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

可能的解决方案可能是：

  • 将您的 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;

我也有同样的场景，我尝试过这种方法并且它有效，你可以尝试 

import React from 'react';
import './App.css';

var images = [];

class App extends React.Component {

     importAll(r) {
      return r.keys().map(r);
    }


  componentWillMount() {
    images = this.importAll(require.context('../public/public/svgfolder/', false, /\.(png|jpe?g|svg)$/));
  }
  render(){
    return(
      <div>
        <div>
         {images.map((image, index) => <div> <p>{index + 1}</p> <img  key={index} src={image} alt="info"></img> </div>  )}
       </div>
      </div>
    )
  }
}

export default App;

我建议将内联 SVG 作为 React 组件，而不是按照您当前的方式加载 SVG。通过这种方式，您也可以使用props和状态以及许多其他有用的功能来控制样式。

例子：

import React from 'react';
import ReactDOM from 'react-dom'

const GithubSVG = (props) => {
  const { backFill, className, mainFill } = props.props;
  return(
    <svg
      className={className}
      height='512'
      id='Layer_1'
      version='1.1'
      viewBox='0 0 512 512'
      width='512'
    >
      <defs id='defs'/>
      <g id='g'>
        <rect
          height='512'
          id='rect'
          style={{
            fill: backFill,
            fillOpacity: 1,
            fillRule: 'nonzero',
            stroke: 'none'
          }}
          width='512'
          x='0'
          y='0'
        />
        <path
          d='a bunch of random numbers'
          id='svg'
          style={{fill: mainFill}}
        />
      </g>
    </svg>
  )
}

export default GithubSVG;

您现在可以在任何地方导入该组件。

如果您使用 Webpack，最好使用svg-url-loaderwebpack 并将它们与您的部署一起打包。

在您的 webpack.config 中添加以下内容

 module: {
    rules: [
      {
        test: /\.svg/,
        use: { loader: 'svg-url-loader', options: {} },
      }
   ]
}

应用程序.css

.zero {
  background: url('../public/svgfolder/0.svg') no-repeat;
}

应用程序.js

<i className="zero" />
其它你可能感兴趣的问题
上一篇为什么 React Native 移动应用需要 redux？ 下一篇ReactJS：仅打开地图项的选定模式弹出窗口