I am getting the error "The requested resource isn't a valid image for /public/logoicon/logoOrange.png received text/html; charset=utf-8"

N

16

26

I am getting an error while trying to add a PNG or SVG file to my code. What is my mistake is or what do I have to change to get it working?

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>

      <Head>
        <title>Maintenance</title>
        <meta name="description" content="This Website is in Maintenance Mode" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={styles.main}>
     <h1 className={styles.h1}>This website is currently in</h1>
     <break></break>
     <h1 className={styles.h2}>Maintenance Mode.</h1>
     <Image
            src="/public/logoicon/logoOrange.png"
            alt="server and database with broken cable"
            width={77}
            height={33}
        />
     <p className={styles.p}>©2022 Karlo-Hosting.com</p>
     </div>
    </div>
  )
}

My code is above.

Nilsanilsen answered 25/3, 2022 at 13:16 Comment(2)

received text/html; charset=utf-8 is a strong indicator that your server returned an HTML document, instead of an actual image - most likely that of your 404 error page. Have you checked how the request got answered, using your browser dev tools? – Tehuantepec 25/3, 2022 at 13:47

If you're referencing an image served from the public folder your image source should be src="/logoicon/logoOrange.png". See nextjs.org/docs/basic-features/static-file-serving. – Adamec 26/3, 2022 at 16:36

C

5

If the server sends you a response thats say "received text/html; charset=utf-8", try to analyse the error. You can see that the server says "Here is your requested text/HTML content that has the UTF-8 format".

Check if the source of the image is correct. And if the image exists and try to check what text/HTML content the file server sends back to you.

Champerty answered 25/3, 2022 at 14:56 Comment(0)

F

39

Solution 1. this error is in terminal right, so 'public' folder is exposed at root level, so you need not specify the public folder

try this - src="/logoicon/logoOrange.png"

instead of - src="/public/logoicon/logoOrange.png"

Solution 2.still if you get 400 bad request error in console

then its a generic client error

check for-> a) URL string syntax b) corrupted cache and cookie c) check if image is too big d) check for any whitespaces in naming folder

Fitzpatrick answered 16/6, 2022 at 14:29 Comment(1)

This helped me. I am new with Next js and I was using public foolder along with my image path in image src. Thanks – Tertia 2/3 at 8:21

G

17

Also just starting picking up Next.js and was baffled by why my images were not being displayed. After changing the format multiple times and checking the source. It appear that the images are actually hosted in the public folder

The solution to my image problem:

So adding images in the following directory:

public/images/[place image file]

This is what my problem was. Hope this helps someone else.

Golden answered 4/9, 2022 at 12:18 Comment(0)

V

8

Simply remove the /public portion before your image name. The public folder is exposed, and automatically searched through and understood by NEXT.JS.

So make /public/test.jpg => /test.jpg

Vouchsafe answered 29/1, 2023 at 16:25 Comment(0)

O

6

try using directly "/" instead of "/public" like this

<Image src={`/image.png`} alt="something" height={150} width={200}/>

Oblige answered 18/4, 2023 at 7:33 Comment(0)

C

5

If the server sends you a response thats say "received text/html; charset=utf-8", try to analyse the error. You can see that the server says "Here is your requested text/HTML content that has the UTF-8 format".

Check if the source of the image is correct. And if the image exists and try to check what text/HTML content the file server sends back to you.

Champerty answered 25/3, 2022 at 14:56 Comment(0)

C

4

So the only thing that works since Next13's Image changes is a set up like this. Note that they have also opted to remove the objectFit props in favour for styles instead - I don't really get the rationale behind this as it feels a bit regressive!

But anyway, I hope this helps some of you. You dont have to call it 'imageAsset' this is just an example - call it what you like as long as it's in your public folder it'll work :)

I thought I would type out a bit of a example as I know some people that come here are new to Next/React and might not fully understand the implementation just yet.

NOTE: removing /public/ from the image src or import doesn't work for all cases as your images may not be directly in the public folder - like below my images are in a subfolder in that directory. Therefore removing /public/ will not work.

import Image from "next/image"
import imageAsset from '/public/images/your-image-asset.webp'

export default function Component() {
  return (
    <>
      <Image src={imageAsset} width={1920} height={1080} style={{objectFit: 'cover', objectPosition: 'center'}} />
    </>
  )
}

Crosier answered 20/2, 2023 at 13:51 Comment(0)

E

3

If you're using nextjs 13 and run in to this problem you have to import the image as an object from the public folder for example:

import placeHolder from '../../../../../public/placeholder.jpg';

and use it in the Image component like this:

<Image
  width={120}
  height={60}
  src={placeHolder}
  alt="brand"
 />

you can also use style for example if you want to set a background image in a div you can do this:

<div style={{ backgroundImage: `url(${placeHolder.src})`}}>

 </div>

Eulogia answered 22/5, 2023 at 14:16 Comment(0)

C

3

if you are using middleware the problem is in [ matcher ] you need to pass the parameters for it to ignore

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

_next/static|_next/image -> they ignore the images and with that it stops giving error and returns 404 [ text/plain ]

https://nextjs.org/docs/app/building-your-application/routing/middleware

Caneghem answered 23/7, 2023 at 8:2 Comment(0)

V

1

For me another process was running on port 3000. You can find the process by running the command below in your Mac Terminal.

$ lsof -i :3000

Afterwards, you can kill the process from Activity Monitor. In my case another instance of NodeJS was utilising port 3000.

Vacuity answered 22/12, 2022 at 15:44 Comment(1)

@starball NextJS development server is powered by NodeJS or at least mine was. I'm using NextJS 12 which uses a rust based compiler (SWC). I hope that answers your question. – Vacuity 6/1, 2023 at 3:26

L

1

importing it like import img from '/public/[your image here]' seems to be working.

Landmark answered 21/1, 2023 at 6:38 Comment(0)

P

1

Worked for me: place all the images in public/(assets or images) folder then import the images into a index.js file like this :

import imagename from './imagename.gif'
import imagename from './imagename.jpg'
import imagename from './imagename.png'

export{
    imagename, imagename, imagename
}

then import the needed image from the projects/assets/index.js like this:

import { imagename } from '../public/assets'

use it in Image like this:

<Image src={imagename} />

Peek answered 31/3, 2023 at 13:35 Comment(0)

M

0

Faced this issue today. Seems like a problem with next/dynamic which would not load the image properly. Not a ethical solution but not dynamically importing your component with the image in it seems to fix it for me.

Metallography answered 29/12, 2022 at 5:47 Comment(0)

P

0

As I just experienced. Probably because the basePath located in next.config.js has changed.

Try to set basePath to default (basePath: '',)

Peltast answered 14/11, 2023 at 13:45 Comment(0)

R

0

For me, I tried almost every solution mentioned by all contributors. None worked so I switched from the Next.js Image tag to the HTML img tag, but removed the public directory and put immediately the /image.png and it works dynamically when loaded.

Roofing answered 15/1 at 0:39 Comment(0)

H

0

I include my image in public directory after that I used below code. It's working for me.

<Image src={'/abc.png'} alt="/" width='125' height='50' />

Hendrickson answered 24/2 at 12:9 Comment(0)

S

0

I got the same error in production build when I tried to upload an image through an input, although everything worked fine in the dev mode. Upon studying, I found out that's because the public folder is inaccessible during the production build and in order to load the newly generated image, you can make use of services like Amazon S3.. hope it helps someone.

Scrag answered 31/3 at 5:43 Comment(1)

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. – Ation 1/4 at 10:29

Recommended topics

Hot tags