search

ericalli / static-site-boilerplate

A better workflow for building modern static websites.
http://staticsiteboilerplate.com
MIT License
1.74k stars 166 forks source link

Images referenced in HTML are incorrectly deleted during production build #60

Closed zgjimgjonbalaj closed 3 years ago

zgjimgjonbalaj commented 3 years ago

Describe the bug Images that are placed in the images folder but only referenced in HTML and not CSS do not get included in the production build. So far only tested with a PNG but would bet it includes others as well.

To Reproduce

  1. Place an image in the /src/images/ folder.
  2. Reference this image in index.html using /images/.png
  3. Run the command npm run build:dist
  4. Check the dist/images folder for your image.

Expected behavior Images that are placed in the assets folder should not be removed.

Desktop (please complete the following information):

zgjimgjonbalaj commented 3 years ago

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

zgjimgjonbalaj commented 3 years ago

Likewise in SCSS

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

joannaong commented 3 years ago

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">
ericalli commented 3 years ago

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')})">