Когда я использую file-loader и html-loader в веб-пакете. Src attr изображения будет похож на '[объектный модуль]'

10

Я делаю проект с webpack4 с нуля. Но когда я пытаюсь отобразить изображение в HTML-файл. Я столкнулся с проводной проблемой: после npm run build. src тега изображения будет построен как <image src="[object Module]". HTML часть:

<img src="images/main_background.jpg">

Это webpack.config.jsтак:

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

И версия этих двух загрузчиков:

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

Я не могу понять, в чем проблема ...

webpack-4

— нельсон
источник

Как вы пытаетесь отобразить изображение в файле HTML?

— КЛП

Сожалею. я собираюсь обновить свой вопрос. И я делаю так: <img src = "./ static / images / demo.png">

— Нельсон

13

Попробуйте добавить esModule: falseопцию в загрузчик файлов следующим образом:

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

То же относится и к URL-загрузчику.

Опция esModule была введена в загрузчике файлов в версии 4.3.0, а в 5.0.0 она была установлена в значение true по умолчанию, что может привести к серьезным изменениям.

Источники:

— MrSegFaulty
источник

2

Ага! Спасибо! Это работает для меня!

— Нельсон

Я рад, что смог помочь :)

— MrSegFaulty

0

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},

— али
источник