Lorsque j'utilise un chargeur de fichiers et un chargeur html dans le webpack. L'attr src de l'image sera comme '[Module objet]'


10

Je fais un projet avec webpack4 à partir de zéro. Mais quand j'essaie d'afficher une image dans un fichier html. J'ai fait face à un problème câblé: Après npm run build. le src de la balise image va être construit comme <image src="[object Module]". La partie html est:

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

C'est webpack.config.jscomme ça:

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


Et la version de ces deux chargeurs:

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

Je ne peux pas comprendre quel est le problème ...


Comment essayez-vous d'afficher l'image dans le fichier HTML?
KLP

Désolé. je vais mettre à jour ma question. Et je fais comme ceci: <img src = "./ static / images / demo.png">
Nelson

Réponses:


13

Essayez d'ajouter une esModule: falseoption au chargeur de fichiers comme ceci:

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

La même chose s'applique au chargeur d'url.

L'option esModule a été introduite dans le chargeur de fichiers dans la version 4.3.0 et dans 5.0.0, elle a été définie sur true par défaut, ce qui peut être un changement de rupture.

Sources:


2
aha! Merci! Ça marche pour moi!
Nelson

Je suis content d'avoir pu aider :)
MrSegFaulty

0
{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.