Cuando uso file-loader y html-loader en webpack. El atributo src de la imagen será como '[módulo de objeto]'

10

Estoy haciendo un proyecto con webpack4 desde cero. Pero cuando trato de mostrar una imagen en un archivo html. Me enfrenté a un problema por cable: después npm run build. el src de la etiqueta de imagen se construirá como <image src="[object Module]". La parte html es:

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

El webpack.config.jses así:

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


Y la versión de estos dos cargadores:

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

No puedo entender cuál es el problema ...

Nelson
fuente
¿Cómo intentas mostrar la imagen en el archivo HTML?
KLP
Lo siento. Voy a actualizar mi pregunta. Y estoy haciendo esto: <img src = "./ static / images / demo.png">
Nelson

Respuestas:

13

Intente agregar la esModule: falseopción al cargador de archivos de esta manera:

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

Lo mismo se aplica al cargador de URL.

La opción esModule se ha introducido en el cargador de archivos en la versión 4.3.0 y en 5.0.0 se ha establecido en verdadero de forma predeterminada, lo que puede ser un cambio radical.

Fuentes:

MrSegFaulty
fuente
2
aha! ¡Gracias! ¡Me está funcionando!
Nelson
Me alegro de poder ayudar :)
MrSegFaulty
0
{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},
Ali
fuente