htmlwebpackwebpack-4pug-loader

webpack 4 pug loader image url not correct

according to the doc of pug loader

Embedded resources

Try to use require for all your embedded resources, to process them with webpack.

div
  img(src=require("./my/image.png"))

and it looks working with me the terminal emitted my image and no error

But the url path not correct

the code:

div.phone-container
    h1 
        a
            img(src=require('./../../assets/images/logo-sm.png'))
    .hamburger.hamburger--collapse
        .hamburger-box
            .hamburger-inner

Produce this weird url object : enter image description here

Solution

  • Since require function return object - I don't know why -. I tried to extract the value using .default and It works this is my code :

    div.phone-container
    h1 
        a
            img(src=require('./../../assets/images/logo-sm.png').default)
    .hamburger.hamburger--collapse
        .hamburger-box
            .hamburger-inner