Как импортировать SVG(png|jpg|gif) файл в React JS
Недавно столкнулся с проблемой вставки простой картинки формата jpg, в рендер компонента React, и по началу я использовал конверторы типа https://onlinejpgtools.com/ для преобразования jpg картинки в кодировку base64, а полученный код использовал в проекте.
.searchForm input.loading { background: #ffffff url('data:image/gif;base64,R0lGODlhFAAUAOMAAERSXJyirHR6hMzS5KyyvFxibISOlKy2xP///wAAAAAA/...;}
Довольно таки топорный метод, учитывая что длина строки на странице кода может достигать нескольких десятков километров.. Тем не менее он рабочий, и удобен для небольших картинок или иконок
Перейдем к методу который без лишних движений позволит импортировать любую картинку или формат SVG в компонент React’a
Для этого понадобится загрузчик файлов, который решит проблему относительных путей для изображений, я использовал react-url-loader, он так же конвертирует изображения base64, но уже только в DOM на странице пользователя.
Установка:
npm i --save-dev url-loader
Добавим код в webpack.config.js
:
rules: [ { test: /\.(png|jpg|gif|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 10000, }, }, ], }, ];
Далее импортируем наш файл в компонент к примеру svg файл
import swap from 'css/icons/form-swap-icon.svg'
Выводим в нужном месте в рендере
<img src={swap} alt="" />
Вывод в DOM структуре на web странице будет выглядеть так
<img src="data:image/svg+xml;base64,PHN2ZyB..." />
Кроме того, есть еще пара других погрузчиков и способов, которые делают более или менее то же самое. Но, надеюсь, это было полезно в любом случае.