пытаясь загрузить изображения через веб-пакет

Question

Я пытаюсь отобразить изображение в своем приложении React с помощью веб-пакета, либо через файл-загрузчик, либо через URL-загрузчик. Но пока я вижу только имя файла, а не изображение.

Вот соответствующая часть моего webpack.config. js:

  ...
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader'
      }
    ]
  },
  ...

Вот импорт в верхней части моего модуля .jsx:

import MyImage from '../../../assets/images/library.png'

И тогда в рендере у меня есть это:

<div>{MyImage}</div>

Но по какой-то причине приложение показывает имя файла вместо изображения.

В частности, сначала веб-пакет, похоже, меняет имя файла на другое (f6273e549cbb9241d47952347b094df7.png), которое появляется рядом с созданным пакетом. js. Но то, что отображается на странице, это имя файла в виде буквенной строки, а не фактическое изображение (смеется). Как я могу показать изображение вместо этого странного замещающего имени файла?

Answer 1

По умолчанию имя полученного изображения будет [contenthash].[ext], как указано в документации . Также рекомендуется помещать файлы в отдельную папку:

{
    test: /\.(png|svg|jpg|gif|jpeg)$/, use: [
        {
            loader: "file-loader",
            options: {
                outputPath: 'img/'
            }
        }
    ]
}

Таким образом, вы можете хранить вещи отдельно друг от друга (изображения, шрифты и т. Д. c.). Правильное использование:

import MyImage from 'app/imgages/logo.png'

<div>
    <img src={MyImage} />
</div>