0

I am trying to simply 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?

Improve this question
2
  • 1
    Why you need third party package? I mean, it's better for you if you can use the <Image /> provided by default. Commented Sep 18, 2021 at 6:26
  • Yeah so the think is <Image/> has been failing in the latest next Js build so that is why PNG image is not getting detected. You can find the solution for the same here - stackoverflow.com/questions/68008498/… Commented Sep 18, 2021 at 9:15

5 Answers 5

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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:

  1. Save or store your image somewhere under the public folder (logo.png for example)
  2. Use the following syntax to render the image: <img src="/public/images/logo.png" />.
    • /public indicate that file is located inside the public 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.

Improve this answer

Comments

0

This will work, if your image is inside public folder.

No imports is required for images inside "public" dir because next will serve this as a public URL, and your access that image using below method.

<Image className="" src="/assets/images/delivery-boy.png" width={10} height={10} alt="" />
Improve this answer

Comments

0

Import your image like this:

import deliveryBoy from "@/public/assets/images/delivery-boy.png"

and use Image tag like this:

<Image src={deliveryBoy} alt="" width={100} height={100} />

don't customize your next.config.js file, it is not needed when you are importing next/image.

Improve this answer

Comments

-1

For a "normal" image, you can use an img tag.

But as NextJS provides image optimization use an Image tag from Next and provide dimensions

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.