Search code examples
javascripthtmlcssbrowsernext.js

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

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.

Solution

  • 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.