CODEWITHSUNDEEP
reactjsnext.js
Vladislav
Vladislav

Reputation: 192

Next.JS compressing images to base64 empty image

I have an pizza.jpg image, that was uploaded to Cloudflare Pages. I place it to page (.jsp file)

<div className="product_img">
    <Image src={'pizza.jpg'} loader={localLoader} alt={'Pizza'} width='300' height='150'/>
</div>

Local loader:

function localLoader({src, width, quality}) {
    return `https://2abf8861.site-deplo.pages.dev/${src}`;
}

Next.js config:

const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: ['2abf8861.site-deploy.pages.dev'],
        formats: ['image/avif', "image/webp"],
        loader: 'custom'
    },
    assetPrefix: './'
}

Then I export page using

next build && next export

And this image becomes:

    <img
   style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
   alt="" aria-hidden="true"
   src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27300%27%20height=%27150%27/%3e"/></span><img
   alt="Pizza" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
   decoding="async" data-nimg="intrinsic"
   style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
<noscript>
   <img
      alt="Pizza"
      srcSet="https://2abf8861.site-deploy.pages.dev/pizza.jpg 1x, https://2abf8861.site-deploy.pages.dev/pizza.jpg 2x"
      src="https://2abf8861.site-deploy.pages.dev/pizza.jpg" decoding="async" data-nimg="intrinsic"
      style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
      loading="lazy"/>
</noscript>

If I use img tag from noscript it works OK. Otherwise it will be a 1*1px white image.

Or I can use

next run dev

and it will be built normally. enter image description here

Upvotes: 0

Views: 2634

Answers (1)

Vladislav
Vladislav

Reputation: 192

Removed .next directory, runned

next build && next export

again and this problem was fixed.

Upvotes: 1

Related Questions