Webpack outputs wrong image path - development

Webpack outputs wrong image path

I’m using Webpack/Laravel Mix. On my original Sass file, a certain path looks like this:

.is-gplay {
  background-image: url(../images/bcg/gplay.png);
}

Mix and webpack will then find the image and copy it to public/images. It will also rewrite the path within the new css file to

.is-gplay {
  background-image: url(/images/gplay.png?d1b4cc17fbb3149178c9a1a6a47e33f);
}

Great. Except it copied the picture to public/images and wrote a path to public/css/images, so now the browser won’t find it unless I edit my compiled css and add ../ in front of the image path so it sees the images folder is outside the css folder by default.

What am I missing here? Why does it create an images folder outside the css folder and then writes a path to css/images?

Sorry if this is something simple I’m not realizing right now. It’s my first time working with webpack.

from Laravel Questions and Answers https://laravelquestions.com/laravel/webpack-outputs-wrong-image-path/
via Lzo Media