How to handle images with webpack encore & assets

Question

so I seem to be a bit confused on how to work with images in webpack encore + assets.

I store all JS & CSS like this

/assets/js
/assets/css
...

With encore I can access them later from my /public/build folder - no issues there.

Now I want to store some images (eg file upload).

First idea was to store them inside a folder like /assets/images . But with the current settings & using assets I can only access files inside /public/build folder.

So I tried to use to copyFiles to copy everything from /assets/images to /public/build/images .

But this does not automatically copy my files (eg file upload to /assets/images/ does not copy it to /public/build - which is in order not accessible in my project). So I would need to run manually encore - which I don't want.

---

Second idea was to store the uploaded images directly inside /public/build/images but those files would be deleted when I run encore.

Next I disabled the webpack option cleanupOutputBeforeBuild , so images would not be deleted. But without this option the folder will be flooded by new JS & CSS Files everytime I run encore.

---

What do I need?

A solution to store my images either way in /assets folder & make them available for my project.

or

store the images directly in /public/build folder without encore deleting them nor flooding the folder with JS/CSS by disabling cleanupOutput Option.

---

Thanks in advance ~Syllz

Answer 1

You can use the CopyWebpackPlugin to do this. You can read this post for more details.

Answer 2

Solution to my problem: Store the images into /public/images and not into the build folder - which will be deleted when running encore.

Answer 3

If u need to use it in JS, just require the file:

// assets/app.js

import logoPath from '../images/logo.png';
let html = `<img src="${logoPath}" alt="ACME logo">`;

When you require an image file, Webpack copies it into your output directory and returns the final, public path to that file.

If u need using it from a templates:

You need to install file-loader to use copyFiles()

yarn add file-loader@^6.0.0 --dev

then enable it in webpack.config.js:

.copyFiles({
    from: './assets/images',
    //optional target path, relative to the output dir
    //to: 'images/[path][name].[ext]',

    //if versioning is enabled, add the file hash too
    to: 'images/[path][name].[hash:8].[ext]',
    //only copy files matching this pattern
    //pattern: /\.(png|jpg|jpeg)$/
})

then use it in your twig template:

<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

more details inSymfony documentation