React卡片组件图片不显示问题求助（附代码示例）

我尝试在React的BoxerCard组件中显示图片，但将图片路径传入imgUrl属性后，图片始终无法在卡片中正常显示。此外，BoxerData.tsx与Boxers.tsx中boxers的类型均为string，我不确定该如何调整类型配置。

相关代码如下：

BoxerCard.tsx #

import React from "react";
import { BoxerCardInterface } from "../data/Types";

export function BoxerCard({name,imgUrl,age,status,}:BoxerCardInterface) {
  return (
    <div className="card w-96 glass m-12">
    <figure><img src={imgUrl} alt="picture"/></figure>
    <div className="card-body">
      <h1 className="card-title flex-col">{name}</h1>
      <div className="card-actions justify-end">
      <button className="btn gap-2">age: {age} Years Old</button>     
      <button className="btn gap-2">{status}</button>     

      </div>
    </div>
  </div>
  );
};

BoxerCardInterface.tsx #

import React from "react";

export interface BoxerCardInterface {
  name: string;
  imgUrl: any;
  age: any;
  status: string;
}

Boxers.tsx #

import React from "react";
import { BoxerCard } from "../components/BoxerCards";
import BoxerData from "../data/BoxerData";


export function Boxers() 
{
    return (
    <div className="flex flex-col md:flex-rows items-center justify-center">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {BoxerData.map(boxers => (
                <BoxerCard
                imgUrl={boxers.imgUrl}
                name={boxers.name}
                age={boxers.age}
                status={boxers.status}
                />
            ))}
        </div>
    </div>
    )
}

BoxerData.tsx #

import React from "react";
import { BoxerCardInterface } from "./Types";

export default [
    {
    name: 'Natalia Castaneda',
    imgUrl: 'src\\pictures\\natalia.jpg',
    age: '19',
    status: 'Open'
   }, 
   {
    name: 'Jocelyn Castaneda',
    imgUrl: '',
    age: '12 ',
    status: 'Novice'
   }, 
   {
    name: 'Joel Sanchez',
    imgUrl: '',
    age: '19',
    status: 'Open'
   }, 
   {
    name: 'Scott Mcfadden',
    imgUrl: '',
    age: '20 ',
    status: 'Open'
   }, 
   {
    name: 'Augusta Grace',
    imgUrl: '',
    age: '26 ',
    status: 'Novice'
   },
   {
    name: 'Mia Andre',
    imgUrl: '',
    age: '13',
    status: 'Novice'
   },
];

问题截图：

一、修复图片显示问题 #

React项目中静态资源的引用有明确规则，直接写src\\pictures\\natalia.jpg这类相对路径无法被打包工具正确解析，可通过以下两种方式解决：

方案1：导入图片文件（推荐） #

在BoxerData.tsx中直接导入图片，React会自动处理打包后的路径：

import React from "react";
import { BoxerCardInterface } from "./Types";
// 导入图片，路径根据实际目录结构调整
import nataliaImg from '../pictures/natalia.jpg';

const BoxerData: BoxerCardInterface[] = [
    {
    name: 'Natalia Castaneda',
    imgUrl: nataliaImg,
    age: '19',
    status: 'Open'
   }, 
   // 其他数据项保持不变
];

export default BoxerData;

方案2：使用public目录存放图片 #

1. 将pictures文件夹移动到项目根目录的public文件夹下
2. 修改BoxerData.tsx中的图片路径为根路径：

imgUrl: '/pictures/natalia.jpg',

二、优化TypeScript类型配置 #

当前代码中any类型的滥用和未明确的数组类型导致类型推断异常，按以下步骤调整：

1. 完善接口定义 #

修改BoxerCardInterface.tsx，替换any为明确的类型：

export interface BoxerCardInterface {
  name: string;
  imgUrl: string;
  age: string; // 若后续需要数字类型，可改为number并在数据中转换
  status: string;
}

2. 给数据数组指定类型 #

修改BoxerData.tsx，明确数组的类型为BoxerCardInterface[]：

import React from "react";
import { BoxerCardInterface } from "./Types";

// 明确数组类型，避免类型推断异常
const BoxerData: BoxerCardInterface[] = [
    // 数据项保持不变
];

export default BoxerData;

3. 优化列表渲染的类型提示 #

在Boxers.tsx中给列表项添加唯一key，同时现在boxers会自动推断为BoxerCardInterface类型，不再是string：

{BoxerData.map((boxers) => (
    <BoxerCard
        key={boxers.name} // 用唯一的name作为key，比index更稳定
        imgUrl={boxers.imgUrl}
        name={boxers.name}
        age={boxers.age}
        status={boxers.status}
    />
))}

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