NextJS images are not shown using "export" script

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!

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)