CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jspng
Ankit Sanghvi
Ankit Sanghvi

Reputation: 527

Image in next js

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?

Upvotes: 0

Views: 2959

Answers (5)

sourabh
sourabh

Reputation: 14

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

Upvotes: -1

Shayan Siddiqui
Shayan Siddiqui

Reputation: 1

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.

Upvotes: 0

Ujjwal Bhandari
Ujjwal Bhandari

Reputation: 26

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=""
  />

Upvotes: 0

Rahul Kumar
Rahul Kumar

Reputation: 31

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.

Upvotes: 0

Jobajuba
Jobajuba

Reputation: 1284

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.

Upvotes: 1

Related Questions