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!

Tal Rofe · Accepted Answer · 2023-02-05 10:56:20Z

17

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)

answered Feb 5, 2023 at 10:56

Tal Rofe

1,9443 gold badges27 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kingkong.js · Accepted Answer · 2023-02-05 10:39:48Z

0

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

edited Feb 5, 2023 at 10:39

answered Feb 5, 2023 at 9:04

kingkong.js

7595 silver badges18 bronze badges

4 Comments

Amir Ben Shimol Over a year ago

Still causes the same problem

kingkong.js Over a year ago

Try saving your image somewhere except your public folder

Amir Ben Shimol Over a year ago

I cannot accept such a solution which is incompatible with nextjs docs

kingkong.js Over a year ago

Sorry, my bad. Didnt catch that you wanted static served. See my edited answer

aatiqa ghazali · Accepted Answer · 2023-05-18 16:47:49Z

0

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.

edited May 18, 2023 at 16:47

answered May 18, 2023 at 16:46

aatiqa ghazali

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

NextJS images are not shown using "export" script

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related