import jpg image in Reactjs with NextJS some images import return long string

Question

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/generator-rental@0,4x.jpg'; 
import generatorw384 from '../images/generators/generator-rental@0,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/generator-rental@0,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, {
            
        }]
    ]
);

Ramakay · Accepted Answer · 2020-07-21 12:17:04Z

1

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.

edited Jul 21, 2020 at 12:17

answered Jul 21, 2020 at 11:48

Ramakay

3,1631 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yuval Levy Over a year ago

Hi, thank you, it sounds like you are right, I have edited and added my next.config.js code because I am not using "next-images" but "optimizedImages" package, do you know how I can set it in order for that fix?

Ramakay Over a year ago

Edited for next-optimized-images

Collectives™ on Stack Overflow

import jpg image in Reactjs with NextJS some images import return long string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related