Quando eu estou usando o carregador de arquivos e html-loader no webpack. O src attr da imagem será como '[object module]'

10

Estou fazendo um projeto com o webpack4 do zero. Mas quando tento exibir uma imagem no arquivo html. Eu enfrentei um problema com fio: Depois npm run build. o src da tag da imagem será construído como <image src="[object Module]". A parte html é:

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

O webpack.config.jsé assim:

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


E a versão desses dois carregadores:

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

Eu não consigo descobrir qual é o problema ...

Nelson
fonte
Como você está tentando exibir a imagem no arquivo HTML?
KLP
Desculpa. vou atualizar minha pergunta.E estou fazendo assim: <img src = "./ static / images / demo.png">
Nelson

Respostas:

13

Tente adicionar a esModule: falseopção ao carregador de arquivos da seguinte maneira:

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

O mesmo se aplica ao carregador de URL.

A opção esModule foi introduzida no carregador de arquivos na versão 4.3.0 e na 5.0.0 foi configurada como true por padrão, o que pode ser uma mudança de última hora.

Fontes:

MrSegFaulty
fonte
2
aha! Obrigado! Está funcionando para mim!
Nelson
Eu estou feliz que eu poderia ajudar :)
MrSegFaulty
0
{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},
todos
fonte