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
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.
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.
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.
received text/html; charset=utf-8
If you’re referencing an image served from the public folder your image source should be