Asked By: Anonymous
I am importing images in different scales and show them in my react app
some images are import correctly,
but some get really long and "strange" string name instead of their regular file name
for example
import generator from '../images/generators/generator-rental.jpg';
import generatorw205 from '../images/generators/[email protected],4x.jpg';
import generatorw384 from '../images/generators/[email protected],75x.jpg';
when I put 3 of them together in srcSet
the smallest image get the long string.
the generatorw205 and generatorw384 are imported correctly and shown with this src property:
"/_next/static/images/generator-rental-9f9671c1ae14a9abd201cce092b95c0d.jpg 512w"
and
/_next/static/images/[email protected],75x-0ff42525965adeb23850ef8dacd34c50.jpg 384w,
but the first image get this string:
data:image/jpeg;base64,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 205w,
And this is my next.config.js file:
const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
})
module.exports = withPlugins(
[
[optimizedImages, {
}],
[withBundleAnalyzer, {
}]
]
);
Solution
Answered By: Anonymous
Update
For next-optimized-images. The plugin has similar config – https://github.com/cyrilwanner/next-optimized-images#inline
module.exports = withPlugins(
[
[optimizedImages, {
inlineImageLimit:4096
}],
[withBundleAnalyzer, {
}]
]
);
some images are import correctly, but some get really long and "strange" string name instead of their regular file name
The strange string name is the base64 representation that can be supplied to data url’s by employing this technique you can avoid additional http downloads from the server.