Images referenced in HTML are incorrectly deleted during production build about static-site-boilerplate HOT 4 CLOSED

Just realized the loader expects no leading slash in the src attribute ie

Bad: "/images/img-name.jpg"
Good "images/img-name.jpg"

I think it makes sense to add a wildcard there, many of us are used to relative URLs

from static-site-boilerplate.

Likewise in SCSS

Bad: "/images/img-name.jpg"
Good: "../images/img-name.jpg"

from static-site-boilerplate.

Images loaded via style and data attributes does not load in prod build

For example, images here is not rendered in prod build

<div style="background-image: url(images/slide-3d.jpg)">
<section data-image-src="images/bg-welcome.jpg">

from static-site-boilerplate.

When using images in your HTML, use the require syntax. The interpolate feature of html-loader will take care of copying over whatever you require into the dist/ folder.

// Require images like so
${require('./images/photo.jpg')}

// Here's an example in your HTML
<div style="background-image: url(${require('./images/photo.jpg')})">

from static-site-boilerplate.