React应用中CardContainer组件内图片不显示问题求助

根据你描述的情况（组件渲染正常、路径验证正确、图片在其他组件可显示），可以从以下几个方向排查：

1. 检查getHoverImg函数的调用时机 #

你在CardCollection中定义了getHoverImg函数，但当前代码里并没有在传递hoverImg props时调用它。如果你的card.hoverImg字段为空，CardContainer就无法自动生成悬停图片路径。需要在渲染CardContainer时直接处理：

{cardData.map((card, index) => (
    <CardContainer
        key={index}
        img={card.img}
        // 调用getHoverImg生成正确的悬停图片路径
        hoverImg={getHoverImg(card.img, card.hoverImg)}
        link={card.link}
    />
))}

2. 确认CardContainer组件对图片props的处理逻辑 #

检查CardContainer内部是否正确将img和hoverImg绑定到<img>标签的src属性，或者悬停状态下的样式中。例如：

// CardContainer.jsx示例代码
import React from 'react';

export default function CardContainer({ img, hoverImg, link }) {
    return (
        <a href={link} className="card-wrapper">
            {/* 默认图片 */}
            <img src={img} alt="Tarot Card" className="card-img" />
            {/* 悬停图片（可通过CSS绝对定位覆盖默认图） */}
            <img src={hoverImg} alt="Tarot Card Hover" className="card-hover-img" />
        </a>
    );
}

如果CardContainer中没有正确使用这两个props，即使路径正确也无法显示图片。

3. 排查React静态资源路径的打包问题 #

React中静态资源的路径处理依赖打包工具（如Webpack）的配置：

• 如果图片放在public文件夹下，必须使用绝对路径（比如/images/tarot/xxx.jpg），不能用相对路径，否则在路由子页面中会出现路径拼接错误（比如/cards/major-arcana/images/xxx.jpg，而实际图片在/images/xxx.jpg）。
• 如果图片放在src文件夹下，需要通过import或require引入，比如：

  // 在CardCollection中预先引入图片
  import FoolCard from '../assets/fool.jpg';
  import FoolCardHover from '../assets/fool-hover.jpg';
  
  const collectionCardData = {
      'major-arcana': [
          { img: FoolCard, hoverImg: FoolCardHover, link: '/fool' }
      ]
  };
  

  或者在CardContainer中动态加载：

  <img src={require(`${img}`)} alt="Tarot Card" />
  

4. 检查浏览器控制台的网络请求 #

打开浏览器开发者工具的「网络」面板，刷新页面后查看图片的请求状态：

• 如果出现404错误，说明实际请求的路径和预期不符，需要调整路径格式（比如改成绝对路径）。
• 如果请求成功但图片不显示，检查图片的content-type是否正确，或者样式是否隐藏了图片（比如opacity: 0、display: none、width: 0等）。

5. 验证CardContainer的样式是否影响图片显示 #

即使组件整体样式正常，也可能存在针对图片的隐藏规则：

• 检查.card-img或.card-hover-img类的CSS属性，确保没有设置visibility: hidden、overflow: hidden导致图片被裁切，或者z-index层级问题导致悬停图片被默认图片覆盖。

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