VadimRosh
@VadimRosh
Старый я, но решил перепрофилироваться. Учусь...

Как реализовать загрузку изображения лоадером webpack?

Всем привет! Пытаюсь курить Реакт.
есть задание: Изображение должно импортироваться в компонент и обрабатываться лоадером вэбпака.
Объясните, пожалуйста, как это реализовать? Что с ним делать? Может есть пример
Спасибо
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },
};


file-loader

Пример использования изображений в коде:
import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

или:
import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы