I am trying to simple just render a PNG image that I have placed in the ./public/assets/images directory in my Next JS project.
I have used the next-images package for the same. However, I still keep getting an error saying
./public/assets/images/delivery-boy.png
TypeError: unsupported file type: undefined (file: undefined)
Here's my code for that component
import React from 'react'
import deliveryBoy from '../../../public/assets/images/delivery-boy.png'
import Image from 'next/image'
const MedicalStoreScreen = () => {
return (
<div className="med-store-screen" >
<div className="section-title-container">
<div className="heading">Medical Store</div>
<div className="sub-heading">medicine home delivery</div>
</div>
<div className="med-store-info-container">
<div className="img-container">
<img src={deliveryBoy} />
</div>
<div className="content-container">
<div className="content">24/7 Delivery in 30 minutes</div>
<div className="content">Upto 30% discount</div>
</div>
</div>
</div>
)
}
export default MedicalStoreScreen
Here's the code for my next.config.js file
const withImages = require('next-images')
module.exports = withImages()
Can someone please suggest what's going wrong in rendering this PNG image in my Next JS app ?
You're not utilising the next image when using "img"
Make sure that the image path is also correct. Looks like the issue could be the path: "../../../public/assets/images/delivery-boy.png".
You should also use Image not img. Like this:
<Image
className=""
src={deliveryBoy}
width={10}
height={10}
alt=""
/>
You can also call the image from the cloud or internet by adding the URL like this:
<Image
className=""
src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width={10}
height={10}
alt=""
/>
Don't forget to add the width, height and alt. You can leave the "alt" blank.
Next.js doesn't allow us to import any image in .js file so the following steps can be used to render the image in Next.js:
public folder (logo.png for example)<img src="/public/images/logo.png" />.
/public indicate that file is located inside the pubic folder, no need to have anything before it./public/image describes that in the public folder go to the image folder/public/image/logo.png full path of the image.If you try to store the image in any other folder except public, it won't render.