Passing Image path by props in NextJS / React not working

April 4, 2023

I’m having some problem in pass image path as a prop to an component

the code is

  <CardProduct imagem={'/nike.jpeg'}/>

the component source code is:

import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

const CardProduct = (imagem) => {
  return (
    <Link href='/' className='flex flex-1 flex-col mx-2 my-2 drop-shadow-md '>
      <img src={imagem}  className='h-40 w-100 bg-gray-200 rounded-t-md flex items-center 
      justify-center text-white'/>
      <div className='border border-solid border-gray-50 h-28  
      rounded-b-md bg-white flex flex-col justify-around p-2'>
        <h2 className='font-bold text-sm'>NOME DO PRODUTO</h2>
        <h3>Descrição produto</h3>
        <h1 className='text-2xl font-bold'>R$ 99,90</h1>

      </div>
    </Link>
  )
}


export default CardProduct

>Solution :

I believe what you are doing is taking in the entire prop object. You need to destructure the imagem out of that object so it can be used in the component that you are showing. Like someone already mentioned to do this…

const CardProduct = ({imagem}) => {}

OR you can do this, but since it looks like you are passing only one prop I recommend the first way.

<img src={imagem.imagem}  className='h-40 w-100 bg-gray-200 rounded-t-md flex items-center 
  justify-center text-white'/>

I believe both of these will work, but it would be nice to have the actual component you are passing props to, to understand what exactly you are passing.