React中传递图片作为Prop无法显示的问题求助

常见问题原因及解决方案 #

1. 未正确引入静态资源（最常见） #

React中，webpack会处理通过import或require引入的静态资源，直接传递字符串路径（如"assets/hero.jpg"）会导致路径解析错误。

方法A：父组件提前引入图片再传递

在传入data的父组件中，先import图片资源：

// 父组件代码示例
import React from 'react';
import HeroSlider from './HeroSlider';
// 引入assets中的图片
import heroImage1 from './assets/hero1.jpg';
import heroImage2 from './assets/hero2.jpg';

const sliderData = [
  {
    title: "示例标题1",
    description: "示例描述1",
    path: "/shop",
    img: heroImage1 // 直接传递引入后的图片对象
  },
  {
    title: "示例标题2",
    description: "示例描述2",
    path: "/shop",
    img: heroImage2
  }
];

const App = () => {
  return <HeroSlider data={sliderData} />;
};

export default App;

方法B：子组件中动态引入图片

如果你的props.item.img只存了文件名（如"hero1.jpg"），可以在HeroSliderItem中用require动态引入：

// 修改HeroSliderItem中的img标签
<img 
  src={require(`../assets/${props.item.img}`)} 
  alt={props.item.title || "轮播图"} 
/>

⚠️ 注意：调整../assets的相对路径，确保和HeroSlider组件所在位置匹配。

2. 使用public目录存放图片 #

如果图片放在项目根目录的public/assets下，可以直接使用绝对路径：

<img 
  src={`/assets/${props.item.img}`} 
  alt={props.item.title || "轮播图"} 
/>

这种方式不需要import，webpack会直接将public目录下的资源复制到构建产物中。

排查步骤 #

• 打开浏览器开发者工具，查看img标签的src属性，确认实际请求的路径是否正确，是否返回404状态码。
• 检查图片文件名（包括大小写）是否完全匹配，比如不要把Hero.jpg写成hero.jpg。
• 确认图片文件确实存在于你指定的assets目录中。

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