Multiple images with same name

[graille]

Hi,

I've found an issue with Encore's image management when files have the same name
My assets/images folder loke like this :

.
├── backgrounds
│   ├── bg-1.jpg
├── bg-1.png

In my app.js, I call each static images used by my project (in JS or CSS files) one by one (@images is a webpack alias):

    // Images
    require('@images/logo.png')
    require('@images/backgrounds/bg-2.png')
    require('@images/bg-2.png')

(The problem is the same if files are referenced in a CSS file and not in a JS file)
But at the end, each images are moved in public/build/images directory :

.
├── app.8953b1aef7032187ce84.js
├── images
│   ├── bg-2.4972df67.png
│   ├── bg-2.68831990.png
│   └── logo.4972df67.png
└── manifest.json

But the manifest.json does not reference the two images :

{
  "build/app.js": "/build/app.8953b1aef7032187ce84.js",
  "build/images/bg-2.png": "/build/images/bg-2.4972df67.png",
  "build/images/logo.png": "/build/images/logo.4972df67.png"
}

Idea :
Would it not be better to have the same file tree in the public/build/images directory ? Something like this :

.
├── app.vue.8953b1aef7032187ce84.js
├── images
│   ├── backgrounds
│   │   └── bg-2.4972df67.png
│   ├── bg-2.68831990.png
│   └── logo.4972df67.png
├── manifest.json

[Lyrkan]

Hey @graille,

That's indeed an issue due to the way the manifest.json file works.

We already discussed about that kind of thing before due to another issue that was a bit worse since the files would use the same name (no hash) and would end up overwriting each other:

• File-loader not works with different images with same name #73
• Consider reverting #110 #136
• Allow to disable the default image and font loaders #103

TL;DR:

• Before Allow to disable the default image and font loaders #103 a hash wasn't added in images filenames unless the versioning was enabled
• We considered using your proposal (by prepending filenames with the [path] placeholder) but that solution wasn't chosen due to the fact that it could create some ugly paths (see Allow to disable the default image and font loaders #103 (comment))

I'm still not sure about what we should do about that (ping @weaverryan) but in the meantime if you want to keep the same tree you can force the use of the [path] placeholder by calling configureFilenames:

Encore.configureFilenames({
    images: '[path][name].[hash:8].[ext]',
    fonts: '[path][name].[hash:8].[ext]'
});

[mikemix]

Still open :(

[Kocal]

Hi, @graille and @mikemix, is this issue still happening in 2025? With latest webpack and Encore versions?

[mikemix]

Hi @Kocal. AFAIR it does not.