Laravel Mix - Images with same filename in different folders are compiled to single asset

I have a problem with assets used in Vue components and compiling them with webpack/Laravel mix in my application.

To make sure I hadn't screwed anything up, I reproduced the same issue on a fresh install.

Issue

When I have an image stored in: /resources/assets/images/folder_1/img.jpg

And a different image with the same name stored in a different folder: /resources/assets/images/folder_2/img.jpg

They both compile into /public/images/img.jpg

This is performed on a fresh installation, steps to reproduce:

Install Laravel
Install laravel-ui
Run php artisan ui:vue
Add image tags with paths to images in ExampleComponent, eg.

<img src="../../assets/images/folder_1/img.jpg" alt="">

<img src="../../assets/images/folder_2/img.jpg" alt="">

Add <example-component> to welcome.blade.php and include app.js
Run npm run dev

It looks like it ignores any directories under the "image" directory and flattens all files. The output in /public/images now only contains one image called img.jpg

What am I doing wrong?

jamalroger

5 years ago

Level 1

Normally it wrong because the tow img has the same name img.jpg laravel-mix copy your images into public/images/ folder and you know that in folder you can have tow file in the same name try to change the name of img

erikhamrin

5 years ago

Best Answer

Level 9

I solved it with the following config:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/,
                    loaders: {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]?[hash]',
                            context: 'resources/assets',
                        }
                    },
                }
            ]
        }
    });

It seems strange that mix doesn't come with [path] in the name attribute and context as default for the file-loader. Propably a godd reason for it.

4 likes

Alexander Horner

4 years ago

Level 1

I have the same problem, but the solution doesn't work. Anyone got an updated version?

Please or to participate in this conversation.