为什么卡片中没有图片？

Question

我试图让图片显示在卡片组件中，但每当我尝试将图片导入 imgSrc 时，它都不会出现在卡片中。如果它有助于在 BoxerData.tsx 中键入和在 Boxers.tsx 中的卡内输入，因为拳击手都是字符串，但我不确定如何更改它。

在 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'
   },
];

Answer 1

复制和粘贴的相对路径输出错误的东西，要修复它手动添加路径。