image is not getting displayed

Answered

American Chinchilla posted this in #help-forum

Open in Discord

American ChinchillaOP

2023-10-20T06:26:04.000Z

Hi,

I am facing issue. I have used next/image.
The images are not getting display and giving error "The requested resource isn't a valid image." when I access the image directly in the browser.

import Image from "next/image";
import hero from 'public/assets/images/home-hero1.jpg'
export default function Home() {
     return (
             <Image
                src={hero}
                alt="hero image"
                width={1080}
                height={720}
                className="p-5 lg:p-1 2xl:w-[90%] xl:w-[85%] h-auto object-cover border-4 border-blue-600 rounded-3xl"
              />
     )

When I checked the sources in browser the image file is not present but when I build the project I can see the image in file system next/static/media in server side.

Do you know where I went wrong?

Technology:
Nextjs 13.5 + Typescript + Tailwind + Plesk

Answered by joulev

you should go ask plesk support and use unoptimized to disable image optimisation for now

View full answer

14 Replies

Silver Marten

2023-10-20T06:37:25.000Z

feels like a problem with the path.
try going with import hero from '/assets/images/home-hero1.jpg'

American ChinchillaOP

2023-10-20T08:02:37.000Z

It gives error Module not found: Can't resolve '/assets/images/home-hero1.jpg'

It perfectly works on local but it doesn't work on production. When I build it on Plesk

@American Chinchilla Hi, I am facing issue. I have used next/image. The images are not getting display and giving error "The requested resource isn't a valid image." when I access the image directly in the browser. ` import Image from "next/image"; import hero from 'public/assets/images/home-hero1.jpg' export default function Home() { return ( <Image src={hero} alt="hero image" width={1080} height={720} className="p-5 lg:p-1 2xl:w-[90%] xl:w-[85%] h-auto object-cover border-4 border-blue-600 rounded-3xl" /> ) ` When I checked the sources in browser the image file is not present but when I build the project I can see the image in file system next/static/media in server side. Do you know where I went wrong? Technology: Nextjs 13.5 + Typescript + Tailwind + Plesk

2023-10-20T08:03:56.000Z

can you make a minimal reproduction repository?

@American Chinchilla It perfectly works on local but it doesn't work on production. When I build it on Plesk

2023-10-20T08:04:20.000Z

on plesk then idk, ignore my message above

this seems like a plesk-specific issue

2023-10-20T08:04:51.000Z

you should go ask plesk support and use unoptimized to disable image optimisation for now

Answer

American ChinchillaOP

2023-10-20T08:05:10.000Z

Oh okay I will try that thank you

2023-10-20T08:05:14.000Z

https://nextjs.org/docs/app/api-reference/components/image#unoptimized

American ChinchillaOP

2023-10-20T08:08:58.000Z

It worked if I add unoptimized that it display the image

I was scratching my head for 3 days

2023-10-20T08:09:24.000Z

yes the root cause is that plesk doesn't support image optimisation apparently so you need to disable that

you may want to contact them to request that they support this nextjs feature

American ChinchillaOP

2023-10-20T08:10:11.000Z

Okay thank you so much I appericate your help