如何在React JS中通过Props向可复用卡片组件传递图片

下面是几种可行的解决方案，帮你搞定图片传递的问题：

方案1：提前导入图片再传递Props #

不要在组件调用时直接用require()，先把图片作为模块导入，再将导入的变量传给Card组件，这是React中处理静态资源的标准方式：

import React from "react";
import styles from "../styles/card-styles/cards.css";
import Bounce from "react-reveal/Bounce";
// 提前导入图片资源
import wheatSvg from "../assets/wheat.svg";

const CardsScreen = () => {
  function Card(props) {
    return (
      <div className="card-content">
        {/* 添加alt属性，符合无障碍访问最佳实践 */}
        <img className="card-image" src={props.view} alt={props.altText}></img>
        <h6 className="card-header">{props.heading}</h6>
        <p className="card-paragraph">{props.description}</p>
      </div>
    );
  }

  return (
    <div className="cards-container">
      <Bounce bottom>
        <Card
          view={wheatSvg}
          altText="Wheat icon"
          heading="Heading"
          description="Lorem ipsum dolor sit amet consectetur. Nunc donec ullamcorper viverra lectus quis pretium volutpat eget. Aliquam ultrices tincidunt nulla commodo."
        />
      </Bounce>
    </div>
  );
};

export default CardsScreen;

方案2：修正require()的使用方式 #

如果坚持要用require()，部分打包工具（如Webpack）会将资源导出为包含default属性的对象，需要手动获取该属性：

<Card
  view={require("../assets/wheat.svg").default}
  heading="Heading"
  description="Lorem ipsum dolor sit amet consectetur. Nunc donec ullamcorper viverra lectus quis pretium volutpat eget. Aliquam ultrices tincidunt nulla commodo."
/>

额外检查项 #

• 确认图片路径正确：检查../assets/wheat.svg的层级是否与CardsScreen.js的位置匹配，比如CardsScreen.js在src/screens/目录，assets在src/assets/时路径才正确，否则需要调整层级。
• 排查CSS样式：确保.card-image没有设置display: none、opacity: 0等隐藏样式，导致图片无法显示。

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