Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.js – Image component loading issue

I have completed basic course on Next.js, where I used Image component in the following way:

<Image
    src="/hero-desktop.png"
    width={1000}
    height={760}
    className="hidden md:block"
    alt="Screenshots of the dashboard project showing desktop version"
></Image>

and hero-desktop.png was in the public directory, alongside app directory with all the routes.

This worked seamlessly.

Now, in other Next.js project I want to use the same (in order to get optimized handling of images), so I have followed the same steps:

  1. Create desired image author-image.jpg and put it in public directory, created alongside app directory.

  2. Add following code:

<Image
  src="/author-image.jpg"
  width={200}
  height={200}
  alt="Michał Turczyn"
  loading="eager"
></Image>

After this setup, I get only Bad Request response for request to get the image:

enter image description here

I also have tried other solution: try to import the image and set src property to that imported value:

import authorImage from '/author-image.jpg';

and

<Image
    src={authorImage}
    width={200}
    height={200}
    alt="Michał Turczyn"
    loading="eager"
></Image>

Also have tried

import authorImage from 'author-image.jpg';

Both attempts resulted in error:
enter image description here

Also I’ve put loading='eager' to override default value loading='lazy' from Next.js. It has no effect on behavior in question.

How could I load the image correctly? Why this issue is happening?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So I have followed this tutorial Image Optimization, and there, the reference to image was done differently, so in my example I needed to add such import statement:

    import authorImage from '../../public/author-image.jpg';

    Then specifying src={authorImage} worked as expected.


  2. 0

    I think you should check this.

    1. Ensure the image file name is author-image.jpg. (check if .png, .jpeg…)
    2. Confirm the image is located in the public folder.
    3. Verify that http://localhost:3000/author-image.jpg is accessible.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search