'nextjs - pass image as props to be used with next/image

I have my index.js as following

import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import Homecard from '../components/homecard'
import logo from '../public/images/logo.jpg'

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <div className='d-flex'>
        <Homecard img={logo} />
      </div>

    </Layout>
  )
}

Here is my Homecard component

import styles from '../styles/homecard.module.css'
import Image from 'next/image'

export default function Homecard({ img }) {

    return (
        <div style={{width: '33.33%'}}>
            <Image src={img} />
        </div>
    )
}

I receive this error

Error: Image with src "/images/logo.jpg" must use "width" and "height" properties or "layout='fill'" property.

If I add the fill layout image is not responsive, if I don't image is not displaying. If I change my Homecard component like this it works.

import styles from '../styles/homecard.module.css'
import Image from 'next/image'
import logo from '../public/images/logo.jpg'

export default function Homecard({ img }) {

    return (
        <div style={{width: '33.33%'}}>
            <Image src={logo} />
        </div>
    )
}

package.json

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "date-fns": "^2.28.0",
    "gray-matter": "^4.0.3",
    "next": "latest",
    "normalize.css": "^8.0.1",
    "prop-types": "^15.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1"
  }
}

How pass image as component props without that error ?

EDIT

I changed my markup like so

<div style={{position: "relative",width: '100px', height: '100px'}}>
    <Image src={logo} layout='fill' />
</div>

Error is gone but it's not responsive, image is distorted

Solution 1:^[1]

After been searching since a while I found that discussion on nextjs github page it seems that I'm not the only that encounter this issue

{/* https://github.com/vercel/next.js/discussions/18739#discussioncomment-344932 */}
<div className={styles.imageContainer}>
    <Image src={logo} layout='fill' className={styles.image}/>                    
</div>

.imageContainer {
    width: 100%;
}

.imageContainer>span { /* OR change span to div */
    position: unset !important;
}

.image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
}

Solution 2:^[2]

if you want auto width to image, check this code

<div style={{position: "relative" , width: "33%" , height: 200}}>
  <Image src={logo} layout="fill" />
</div>

if you want auto responsive, check this code

<div>
  <Image src={logo} layout="responsive" whidth={50} height={50} />
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	akio
Solution 2

'nextjs - pass image as props to be used with next/image

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]