ExportedImage return 404 status

[NguyenChiTrung1310]

Hi, I have an issue that the ExportedImage cannot optimze image size as well as return 404 status (see the image).

import bannerImg2 from '@assets/images/Home/banner-2.jpg' // store at the path "public/assets/images/Home"

<ExportedImage src={bannerImg2} alt='text' layout='responsive' useWebp={true} />

Please help me how to fix this issue. Thanks for your help.

[Niels-IO]

Hi @NguyenChiTrung1310,

Just to be sure: are you encountering these 404s just in the dev environment or also in production? It is expected that in the dev environment, the optimized images are not created yet.

Please run the export script as shown in the documentation and test it again with the files in the output folder.

[dankore]

I can confirm this!

The line below could be the reason why:

Could not find a next.config.js file. Use of default values

[Niels-IO]

Hi @dankore,

Thanks for the hint. I tried to reproduce the error but couldn't. Can you please share two pieces of information:

1. How are you calling the next-image-export-optimizer package?
2. Are you using a regular next.config.js file in the main folder, or is it somehow "special"?

Thanks!

[dankore]

Hi @dankore,

Thanks for the hint. I tried to reproduce the error but couldn't. Can you please share two pieces of information:

1. How are you calling the next-image-export-optimizer package?
2. Are you using a regular next.config.js file in the main folder, or is it somehow "special"?

Thanks!

Answers:

1. "build": "next build && next export && next-image-export-optimizer"
   

2. Regular next.config.js file but it exports a PWA. See below:

/** @type {import('next').NextConfig} */

const withPWA = require('next-pwa')({
  dest: 'public',
  fallbacks: {
    image: '/icons/ms-icon-310x310',
    // document: '/other-offline',  // if you want to fallback to a custom page other than /_offline
    // font: '/static/font/fallback.woff2',
    // audio: ...,
    // video: ...,
  },
});

module.exports = withPWA({
  reactStrictMode: true,
  output: 'standalone',
  images: {
    loader: 'custom',
    imageSizes: [10, 16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
  env: {
    nextImageExportOptimizer_imageFolderPath: 'public/images',
    nextImageExportOptimizer_exportFolderPath: 'out',
    nextImageExportOptimizer_quality: 75,
    nextImageExportOptimizer_storePicturesInWEBP: true,

    // If you do not want to use blurry placeholder images, then you can set
    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
    // `placeholder="none"` to all <ExportedImage> components.
    //
    // If nextImageExportOptimizer_generateAndUseBlurImages is false and you
    // forget to set `placeholder="none"`, you'll see 404 errors for the missing
    // placeholder images in the console.
    nextImageExportOptimizer_generateAndUseBlurImages: true,
  },
});

[dankore]

@Niels-IO, it worked without exporting next.config.js file with PWA!

module.exports = {
  images: {
    loader: 'custom',
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
  env: {
    nextImageExportOptimizer_imageFolderPath: 'public/images',
    nextImageExportOptimizer_exportFolderPath: 'out',
    nextImageExportOptimizer_quality: 75,
    nextImageExportOptimizer_storePicturesInWEBP: true,

    // If you do not want to use blurry placeholder images, then you can set
    // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
    // `placeholder="empty"` to all <ExportedImage> components.
    //
    // If nextImageExportOptimizer_generateAndUseBlurImages is false and you
    // forget to set `placeholder="empty"`, you'll see 404 errors for the missing
    // placeholder images in the console.
    nextImageExportOptimizer_generateAndUseBlurImages: true,
  },
};
 

[Niels-IO]

Hi @dankore,

I tried replicating the error with next-pwa in the config but have had no success. Even when I use the config you shared in this issue; it successfully reads the content of the environment variables in the next.config.js. Not sure what the issue for you was then.