Web paketinde dosya yükleyici ve html yükleyici kullanırken. Görüntünün src attr'u '[object Module]' gibi olacak

Sıfırdan webpack4 ile bir proje yapıyorum. Ama html dosyasında bir görüntü görüntülemeye çalıştığımda. Kablolu bir sorunla karşılaştım: Sonra npm run build. resim etiketinin src'si olarak oluşturulacaktır <image src="[object Module]". Html kısmı:

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

Bu webpack.config.jsşöyle:

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

Ve bu iki yükleyicinin versiyonu:

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

Sorunun ne olduğunu anlayamıyorum ...

esModule: falseDosya yükleyiciye şöyle bir seçenek eklemeyi deneyin :

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

Aynı şey url yükleyici için de geçerlidir.

esModule seçeneği, 4.3.0 sürümünde dosya yükleyicide tanıtıldı ve 5.0.0'da varsayılan olarak true olarak ayarlandı ve bu da bir değişiklik olabilir.

Kaynaklar:

• dosya yükleyici sürüm geçmişi
• ilgili github sorunu

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