NextJS/React中通过Props传递图片路径失效问题排查

问题场景 #

在NextJS/React项目中，向CardProduct组件通过Props传递图片路径后，图片无法正常加载，显示灰色占位区域。

调用组件代码：

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

组件原代码：

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

问题原因 #

组件接收Props时未正确解构：const CardProduct = (imagem) => {...} 中的imagem是完整的Props对象，而非传入的imagem属性。直接将该对象赋值给img的src属性，会导致图片路径解析错误。

修复方案 #

方案1：修正Props接收方式 #

将组件参数改为解构形式，直接获取imagem属性：

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

const CardProduct = ({ imagem }) => { // 解构获取imagem属性
  return (
    <Link href='/' className='flex flex-1 flex-col mx-2 my-2 drop-shadow-md '>
      <img 
        src={imagem}  
        alt="产品图片" // 补充alt属性，提升可访问性
        className='h-40 w-full 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

同时确保图片文件nike.jpeg放在Next项目的public目录下（Next会自动从public根目录解析以/开头的路径）。

方案2：使用Next官方Image组件（推荐） #

Next的Image组件提供自动优化、懒加载等特性，更适合Next项目。修改后的代码如下：

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 '>
      {/* 给Image组件设置相对定位的父容器 */}
      <div className='h-40 w-full bg-gray-200 rounded-t-md relative'>
        <Image
          src={imagem}
          alt="产品图片"
          fill // 让图片填充整个父容器
          className="object-cover rounded-t-md" // 保持图片比例并填充容器
        />
      </div>
      <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

使用Image组件时，需给父元素添加relative类，因为Image默认是绝对定位，fill属性会让图片自动填充父容器的尺寸。

内容的提问来源于stack exchange，提问作者WesleyAlmont