Next.JS 压缩图片为base64空图片

Question

我有一张 pizza.jpg 图片，已上传到 Cloudflare Pages。我把它放在页面 (.jsp 文件)

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

本地加载程序：

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

Next.js 配置：

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

然后我使用

导出页面

next build && next export

这张图片变成了：

    <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>

如果我使用 noscript 中的 img 标签，它就可以正常工作。否则它将是一个1*1px的白色图像。

或者我可以使用

next run dev

并且会正常构建。

Answer 1

删除.next 目录，运行

next build && next export

再次解决此问题。

Next.JS 压缩图片为base64空图片

Next.JS compressing images to base64 empty image

reactjs

next.js