webpack 4 pug loader image url not correct

Question

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 :

score 4 · Accepted Answer · answered Dec 07 '19 at 07:35

4

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

answered Dec 07 '19 at 07:35

Ayman Morsy

1,279
1
10
28

thanks, that solved my problem. did you figure out way to ommit .default? and also it returns path \path\to\image.png instead of /path/to/image.png (like in windows file system) – Erik Kubica Oct 10 '20 at 13:28
I've been experiencing this same issue, and I also would like to ommit the .default. @ErikKubica – robev Jan 06 '21 at 12:53

webpack 4 pug loader image url not correct

1 Answers1