невозможно отобразить svg из локальной папки с помощью React js

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;

Я получаю сообщение об ошибке ниже

Модуль не найден: Вы попытались импортировать ../public/svgfolder/0.svg, который находится за пределами каталога проекта src /,Относительный импорт за пределами src / не поддерживается.

здесь мне нужно 3 вещи

1. Как мы можем динамически отображать 50 svgs в реакции?
2. некоторыелюди предлагают внести изменения в веб-пакет, так что это правильный подход, я имею в виду, будет ли он работать и в производстве?
3. нужно ли нам использовать общую папку или любую другую папку?
4. Реагировать на поддержкуsvg's?

Примечание: если я вызываю svg через url <img src={"https://s.cdpn.io/3/kiwi.svg"}/>,

, это работает, и если то же самое, используя локальный файл, это не

, и еслиположите svg один файл src в папку, чтобы один файл мог отображать

Answer 1

У меня тоже есть тот же сценарий, где я попробовал этот подход, и он работал, вы можете попробовать

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;

Answer 2

React не предоставляет доступ к содержимому вне каталога src для использования в коде React.

Возможные решения могут быть:

• Переместите svg в каталог src (рекомендуется).

• Используйте папку Public и получайте к ней доступ следующим образом. ( Использование общих папок )

.

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

Answer 3

Если вы используете Webpack, лучше использовать svg-url-loader для веб-упаковки и упаковать их в свои развертывания.

Добавьте ниже в ваше приложение webpack.config

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

.css

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

app.js

<i className="zero" />

Answer 4

Вместо загрузки SVG, как вы сейчас это делаете, я бы рекомендовал встроенный SVG в качестве React Components.Таким образом, вы можете управлять стилем с помощью реквизита и состояния, а также многих других полезных возможностей.

Пример:

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;

Теперь вы можете импортировать этот компонент куда угодно.