Images are "broken" icon, no errors in console
FunctionDJ opened this issue · comments
I have all optional packages installed, and sharp. Both the dev (using optimizeImagesInDev
) as well as the static site build show this broken icon.
I've also tried appending ?webp
but same result.
React:
<img src={require("../public/images/myImage.png")} />
next.config.js
:
const path = require("path");
const optimizedImages = require("next-optimized-images");
const withPlugins = require('next-compose-plugins');
const plugins = [
[optimizedImages, {
optimizeImagesInDev: true,
inlineImageLimit: 128,
responsive: {
adapter: require("responsive-loader/sharp"),
}
}]
];
const nextConfig = {
webpack: config => {
config.module.rules.push( {
test: /\.(jpe?g|png|webp)$/i,
use: {
loader: 'responsive-loader',
options: {
adapter: require('responsive-loader/sharp')
}
}
});
return config;
},
// some other config i omitted
};
module.exports = withPlugins(plugins, nextConfig);
HTML in browser:
<img src="/_next/static/images/myImage-50bf1e120c8986d1c5fe3a16268f5188.png" class="jsx-644730156">
Same here today.
I've found the issue at least.
const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withPWA = require('next-pwa');
/* const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
}); // only for Dev-Phase, REMOVE for production!
*/
const nextConfig = {
webpack(config) {
config.module.rules.push(
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
esModule: false,
name: '[name].[ext]',
},
},
},
{
test: /\.ya?ml$/,
use: 'js-yaml-loader',
}
);
return config;
},
};
module.exports = withPlugins(
[
[
withOptimizedImages,
{
optimizeImagesInDev: true,
handleImages: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif'],
},
],
// [withBundleAnalyzer],
],
nextConfig
);
In my webpack-config : url-loader
I had jpg|jpeg|png
. After removing this, it works like expected.
Thats a really difficult error, because some Images still work with this configuration, other not.
At least it depends on the way next-optimized-images work. It injects files with smaller-file-size as data:
but bigger files will be included via path-string.
In my case, "smaller files" cause the error, while the big ones work like expected.
Hope that helps somebody out.