通过道具传递图像

Question

我似乎无法使用道具传递图像或图像 url。我想将道具从数组传递到卡片。

import Card from "./Card"


function Specials() {
    const specials = [
        {
            img: '../icons-assets/bruchetta.svg',
            foodItem: 'Bruchetta' ,
            description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
            price: '$15'
        },
        {
            img: '../icons_assets/greek salad.jpg',
            foodItem: 'Greek Salad' ,
            description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
            price: '$17.8'
        },
        {
            img: '../icons_assets/lemon dessert.jpg',
            foodItem: 'Lemon Desert' ,
            description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
            price: '$18.9'
        },
    ]
  return (
    <div className='specials'>
        <div className="special-heading">
            <h1>Specials</h1>
            <button className='btn'>Online Menu</button>
        </div>
        <div className="card-container">
        {specials.map((item,index) => {
            return <Card key={index} image = {item.img} foodItem = {item.foodItem} description = {item.description} price = {item.price} />
        }) }
        </div>
    </div>
  )
}

export default Specials

我想从这里传到卡片组件

function Card(props) {

  return (
    <>
        <div className="card-content">
            <img src={props.image} alt='picture'/>
            <div className="item-headings" >
                <h3>{props.foodItem}</h3>
                <h4>{props.price}</h4>
            </div>
            <p>{props.description}</p>
        </div>
    </>
  )
}

export default Card

除了图像或路径之外的所有内容都通过道具。我尝试过传递元素本身、路径和导入，但似乎都不起作用。两者都在同一个文件夹中，因此两者的路径相同。