Как импортировать 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..." />

Кроме того, есть еще пара других погрузчиков и способов, которые делают более или менее то же самое. Но, надеюсь, это было полезно в любом случае.

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии