Wenn ich File-Loader und HTML-Loader im Webpack verwende. Das src attr des Bildes wird wie '[Objektmodul]' sein.

10

Ich mache ein Projekt mit webpack4 von Grund auf neu. Aber wenn ich versuche, ein Bild in einer HTML-Datei anzuzeigen. Ich hatte ein Problem mit dem Kabel: Nachher npm run build. Die src des Bild-Tags wird als erstellt <image src="[object Module]". Der HTML-Teil ist:

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

Das webpack.config.jsist so:

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

Und die Version dieser beiden Lader:

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

Ich kann nicht herausfinden, was das Problem ist ...

webpack-4

— Nelson
quelle

Wie versuchen Sie, das Bild in der HTML-Datei anzuzeigen?

— KLP

Es tut uns leid. Ich werde meine Frage aktualisieren. Und ich mache das so: <img src = "./ static / images / demo.png">

— Nelson

13

Versuchen Sie, esModule: falsedem File-Loader folgende Option hinzuzufügen :

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

Gleiches gilt für den URL-Loader.

Die Option esModule wurde in File-Loader in Version 4.3.0 eingeführt und in 5.0.0 standardmäßig auf true gesetzt, was eine wichtige Änderung sein kann.

Quellen:

— MrSegFaulty
quelle

2

Aha! Vielen Dank! Es funktioniert für mich!

— Nelson

Ich bin froh, dass ich helfen konnte :)

— MrSegFaulty

0

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

— ali
quelle