Closed ThePeach closed 2 months ago
By default (and judging from your settings this shouldn't have changed) Vite should put your images in the _site/assets/
subfolder along with your scripts and stylesheets. They're only present at _site/images/
since the dev server uses Vite as a middleware, meaning it works in place and doesn't discard what eleventy generates, but the images should be present in both folders.
Vite should recognise the reference to your images in html and change it to link to assets
automatically in the final output. Is that not the case for you?
Well that was interesting, and silly me for not checking earlier... I checked the generated HTML and now I'm more confused than before, what would normally be:
<picture><source type="image/jpeg" srcset="/images/rpql6wqYYO-300.jpeg 300w, /images/rpql6wqYYO-600.jpeg 600w, /images/rpql6wqYYO-1200.jpeg 1200w" sizes="(min-width: 600px) 600px, `1200px"><source type="image/webp" srcset="/images/rpql6wqYYO-300.webp 300w, /images/rpql6wqYYO-600.webp 600w, /images/rpql6wqYYO-1200.webp 1200w" sizes="(min-width: 600px) 600px, `1200px"><img class="" alt="An image of thick ropes laying on the ground next to each other - Photo Credit: Matteo Pescarin" loading="lazy" decoding="async" src="/images/rpql6wqYYO-300.jpeg" width="1200" height="520"></picture>
when building I get instead:
<picture><source type="image/jpeg" srcset="/assets/styles/main.62fd7692.css 300w, /assets/styles/main.6878b93c.css 600w, /assets/styles/main.1825ebd2.css 1200w" sizes="(min-width: 600px) 600px, `1200px"><source type="image/webp" srcset="/assets/styles/main.9312b2c5.css 300w, /assets/styles/main.f99bff27.css 600w, /assets/styles/main.60027b5b.css 1200w" sizes="(min-width: 600px) 600px, `1200px"><img class="" alt="An image of thick ropes laying on the ground next to each other - Photo Credit: Matteo Pescarin" loading="lazy" decoding="async" src="/assets/styles/main.62fd7692.css" width="1200" height="520"></picture>
if I was unsure before, now I'm completely at loss. :disappointed:
I relation to your point: no, when the images are created, are only present in _site/images/
.
Can only guess but I think what causes this is your rollupOptions
. Images are also assets, so assetFileNames: 'assets/styles/main.[hash].css'
would cause all of them to be renamed to css files, which they're not. I don't know how to output stylesheets and images in different folders using Rollup, but all of them should be output and linked correctly into the assets folder if you remove that part from your configuration.
Alternatively, you could try and have Vite copy the images without any renaming by outputting them in the public
subfolder, though you would probably need a custom function in place of Image.generateHTML
, as images would need to be linked to the root folder instead of the subfolder for static assets.
As @ngdio pointed out, the problem here is the misconfiguration of assetFileNames
. A proper configuration for your use case might look like this:
assetFileNames: (assetInfo) => {
const extension = path.extname(assetInfo.name);
if (['.jpeg', '.png', '.avif', '.webp'].includes(extension)) {
return 'assets/images/[name].[hash].[ext]';
}
if ('.css' === extension) {
return 'assets/styles/[name].[hash].[ext]';
}
return 'assets/[name].[hash].[ext]';
},
For best performance @11ty/eleventy-img
should output the images to the same path. So the caching of the plugin can properly work. For that usecase one would probably also omit the [hash]
token for the image assets.
If the problem still persists for you, feel free to comment. Closing for now as it's not a bug of the plugin.
The current website I have uses Nunchucks as templating language, md for posts, and that's mostly it. The config is quite straightforward for a blog. I've taken most of the configuration for it from the project Eleventy Plus Vite.
I am using njk shortcodes to generate the images.
Now when run in dev mode, the images are generated and copied without problems in
_site/images/
, but when I run the build process, the_site/images/
folder does not contain any of the images that should have been generated.Any help would be greaty appreciated, unfortunately I don't know Vite in depth enough to pester around with the config without making a mess 🙂