-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create thumbnail of original image #491
Comments
Thanks for letting me know, I'll take a look tomorrow |
I think the issue is in your Webpack config. It's important to note, that Asset Modules is a Webpack5 feature and the current version of this plugin was made for the old If your "large" image is "broken" I assume this is only because the output file extension doesn't match the real format/MIME of that image because with Asset Modules the If by default you only want to "copy" large images as-is (without any optimization), you should use Rule.oneOf with two items: The 1st with Hope it helps. |
Many thanks @szegheo that helped clear some things up for me. In the end I went with responsive-loader (seems to be compatible with webpack 5) with the following setup:
{
test: /\.(svg|woff2?|ttf|eot)$/i,
type: 'asset/resource',
generator: {
filename: '[name].[contenthash][ext]',
}
},
{
test: /\.(jpe?g|png)$/i,
use: {
loader: 'responsive-loader',
options: {
adapter: require('responsive-loader/sharp'),
name: '[name].[contenthash]-[width].[ext]',
format: 'webp'
}
}
}
<a href="<%= require('./img/example.png') %>">
<img src="<%= require('./img/work/example.png?size=200') %>" />
</a> |
I have a folder of "large" images e.g.
src/img/photos/my-photo.jpg
etc.As-per webpack docs these are being copied to my
dist
folder using Asset Modules i.e.I want to create 200x200px thumbnails i.e. "small" versions but also keep the "large" images being copied.
When I use
webpack-image-resize-loader
(orwebpack-sharp-loader
) in combination with either the Asset Modules approach as above or the oldfile-loader
approach, the resulting "large" image is broken and cannot be opened.It seems these loaders interfere with separate file handling I have. Any ideas for a solution to this?
The text was updated successfully, but these errors were encountered: