NextJS images are not shown using "export" script

Question

I have a simple NextJs app.

When I'm running the app on a localhost everything seems to work fine - All the images are shown as expected

When I use this script: next build && next export and browse to my local build, I don't see the images, but instead its "alt" text

The way I import an image:

import React from 'react';
import Image from 'next/image';

import someImage from '../../../public/images/some-image.png';


const Main = () => {
    return (
        <div>
            <Image
                src={someImage}
                alt="Some Image"
                placeholder="blur"
            />
        </div>
}

next.config.js

/** @type {import('next').NextConfig} */
const configuration = {
    reactStrictMode: true,
    eslint: {
        dirs: ['./src'],
        ignoreDuringBuilds: true,
    },
    images: {
        loader: 'akamai',
        path: '',
    },
};

module.exports = configuration;

My code design:

Environment: "next": "13.1.6", "react": "18.2.0",

Moreover, I tried to use a normal img tag and it causes the same problem.

If anyone here faces the same issue ill appreciate any help!

Answer 1

Refer to this page: https://nextjs.org/docs/messages/export-image-api

You are attempting to run next export while importing the next/image component using the default loader configuration.

However, the default loader relies on the Image Optimization API which is not available for exported applications.

So, when running static NextJS app with export you cannot use NextJS optimization, as it should run in your non-existent server. You should use cloud solution (https://nextjs.org/docs/api-reference/next/image#loader-configuration) or remove optimization:

module.exports = {
  images: {
    unoptimized: true,
  },
}

(https://nextjs.org/docs/api-reference/next/image#unoptimized)

Answer 2

When importing something statically from the public folder it already knows youre inside it. You only need the following import:

import someImage from 'images/some-image.png';

Answer 3

You cannot use next js optimized Image tag when exporting static files/runing npm run export. You can refer to next js official documentation to check that which tags don't work with export out command. As an alternative replace all Image tags in your application with img tag and remove import Next/Images lines from all files and also add unoptimised image option in next js config file.