Getting image as an object-CodePudding

import React from 'react';
import styles from './Home.module.css';
import information from '../../images/information.png'


const Home = () => {

    return (
        <div>
            <div className={styles.info}>
                <div className={styles.informationCard}>
                    <img src={information} alt="" className={styles.informationImg}/>
                    <h3>Find all the information you need!</h3>
                </div>
            </div>
        </div>

    )
}

export default Home

I have imported my desired image as information in next js but when i use it as src I am not getting the image . The import the file / folder everything is correct but when I use it it returns <img src="[object Object]"> and not the image . What should I do ?

CodePudding user response：

Using nextJs you have to consider how your files are served by nextJs.

I recommend you to check the following page of the documentation:

https://nextjs.org/docs/basic-features/static-file-serving

In your case the image will have to be stored in the public folder and you can access it just by linking to "/information.png"

CodePudding user response：

Move your images folder and your image into the Next.js's public folder:
images/information.png => public/images/information.png

Then you can put the image path in src like this:

<img src="images/information.png" alt="" className={styles.informationImg}/>

you don't need to write /public/ inside the src. Also you don't need to import your image.