Question 51774 in Javascript Question posted in
A very good W3school tutorial can be found here.

Passing Image path by props in NextJS / React not working – Javascript

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

enter image description here

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    I feel like there is a certain flow that React/Next js need to get the images displayed just by passing the path of the image.
    You should store the image file in the public folder where the index.html file is present ( in the case of React ). Cause it looks for the file in the public folder only while rendering, but when we import the image as a variable it converts the path for the index.html file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search