React组件通过Props传递图片路径失败问题咨询

问题核心 #

React中直接使用相对字符串路径作为img的src属性时，Webpack无法正确解析路径映射，导致图片加载失败。你当前的路径是相对于Specials.js的，但组件渲染时路径会被解析为相对于最终构建后的HTML文件，自然找不到资源。

可行解决方案 #

方案1：通过import导入图片（推荐） #

在Specials组件中先导入图片资源，再将导入后的对象传递给Card组件：

import Card from "./Card"
// 提前导入所有图片
import bruchettaImg from '../icons-assets/bruchetta.svg';
import greekSaladImg from '../icons_assets/greek salad.jpg';
import lemonDessertImg from '../icons_assets/lemon dessert.jpg';

function Specials() {
    const specials = [
        {
            img: bruchettaImg,
            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: greekSaladImg,
            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: lemonDessertImg,
            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

Card组件保持原代码即可：

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

方案2：利用public目录引用 #

将图片放到项目根目录的public文件夹下（比如public/icons-assets/），直接使用绝对路径：

修改specials数组的路径：

const specials = [
    {
        img: '/icons-assets/bruchetta.svg',
        // 其他属性不变
    },
    {
        img: '/icons_assets/greek salad.jpg',
        // 其他属性不变
    },
    {
        img: '/icons_assets/lemon dessert.jpg',
        // 其他属性不变
    },
]

这种方式无需导入，直接通过绝对路径指向public目录下的资源。

额外注意事项 #

• 检查路径拼写：你第一个图片路径用了icons-assets（连字符），后两个是icons_assets（下划线），确认实际文件夹名称是否一致，避免拼写错误导致资源找不到。
• 避免用index作为key：如果数组元素可能重新排序，建议给每个item添加唯一id字段，或者用foodItem作为key，防止渲染异常。

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