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

user_15564757 0
Viewed 4096

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.

next.js browser css html javascript
3 Answers

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

Admin1

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.

user_110908070

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.

user_34601500
Related