Menu
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.
509
asked Aug 31 '25 22:08
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
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With