What should we put in assets/images?

sage
1

Hi,

i’m a bit confused right now about the purpose of the assets/images folder. In Sage8 I put nearly everything in the images folder what doesn’t get uploaded via the Wordpress Mediathek.

So for example logos, some inline images, background images and so on.
This images get called inside an Theme template file. For example in the templates/header.php

<img src="<?= get_template_directory_uri(); ?>/dist/images/logo.svg" />

Now webpack does compile images to the dist folder if they are used in a scss file, (right?). So all images
in the templates file are ignored and won’t show up in the dist folder.

So what I’m missing here?
Should I put my images in /app/uploads/ folder and use the assets/images folder
just for images used in css files?

Regards

2

Webpack needs you to think of assets as javascript assets. If you’re going to need logo.svg straight in your code, you should add that to your bundle as well in order for webpack to consider it too.

You can do that by adding the image to your asset list in your entry point, such as:

"entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss",
      "./images/logo.svg"
    ],

Other than that, yes webpack will automatically pick up all the images that are referenced in your scss files and automatically include them in your bundle

3 Likes
3

Thank you very much!

1 Like
4

Hi, there’s something to automate this process? Something like this:"./images/*.svg" for example.
Thank you!

5

Not as far as I know. I feel like it would also be kind of a bad practice to pull in a whole folder, losing control over what’s needed and what’s not, bloating your bundles with unnecessary assets.
It’s generally better to specify what’s needed manually!

6

Seriously? I mean, what If i need to add a lot of images? Should I add every of them manually?

EDIT: actually is pretty simple <img src="@asset('images/example.jpg')">