React.js卡片滑块图片不显示问题求助

以下是针对本地图片无法显示的核心排查点，结合React的资源加载规则逐一验证：

1. 确认图片导入方式是否正确 #

React中本地图片不能直接用字符串路径赋值给img的src属性（除非图片放在public目录下），必须通过模块导入：

• 先在组件顶部导入图片：

  import project1Img from '../assets/project1.jpg';
  

• 然后在你的卡片数据对象中使用导入后的变量：

  const cardData = [
    {
      title: '项目1',
      img: project1Img, // 这里用导入的变量，不是字符串路径
      // 其他字段...
    }
  ];
  

2. 检查路径拼写与层级 #

• 大小写敏感：Linux/macOS环境下文件路径区分大小写，比如Project1.jpg和project1.jpg会被视为不同文件，Windows虽然不敏感，但建议统一大小写避免部署问题。
• 层级对应：如果组件在src/components/Portfolio.js，图片在src/assets/imgs/，相对路径应该是../assets/imgs/project.jpg，数清楚../的数量（每一个../代表向上一级目录）。

3. 验证渲染时的src引用 #

确保在渲染卡片时，img标签的src正确绑定了对象中的图片字段：

// 正确写法
<img src={card.img} alt={card.title} />

// 错误写法（不要加引号，否则会把card.img当成字符串）
<img src="card.img" alt="card.title" />

4. public目录下图片的特殊处理 #

如果图片放在项目根目录的public文件夹中（比如public/images/project1.jpg），可以直接用绝对路径：

const cardData = [
  {
    title: '项目1',
    img: '/images/project1.jpg', // 以/开头，代表public根目录
    // 其他字段...
  }
];

示例完整代码 #

// Portfolio.js
import React from 'react';
// 导入本地图片
import ecommerceImg from '../assets/ecommerce-site.jpg';
import portfolioImg from '../assets/portfolio-site.jpg';

const portfolioCards = [
  {
    id: 1,
    title: '电商平台',
    img: ecommerceImg,
    description: '基于React构建的响应式电商网站'
  },
  {
    id: 2,
    title: '个人作品集',
    img: portfolioImg,
    description: '展示个人项目的静态展示页'
  }
];

const Portfolio = () => {
  return (
    <div className="card-slider">
      {portfolioCards.map(card => (
        <div key={card.id} className="card-item">
          <img src={card.img} alt={card.title} className="card-img" />
          <h3 className="card-title">{card.title}</h3>
          <p className="card-desc">{card.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Portfolio;

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