图像未出现在 CardContainer 组件中

Question

我的 React 应用程序面临一个问题，即 CardContainer 组件内的图像没有出现在页面上。 CardContainer 组件本身正确呈现，并且样式应用正确。但是，默认图像和 getHoverImg 函数生成的悬停图像都没有显示。

以下是相关代码片段：

import React from 'react';
import { useParams } from 'react-router-dom';
import "./CardCollection.css";
import TopNavbar from "../Index/IndexPageComponents/TopNavbar/TopNavbar.jsx";
import SuccessStory from '../Index/IndexPageComponents/SuccessStory/SuccessStory.jsx';
import ContactNavbar from '../Index/IndexPageComponents/ContactNavbar/ContactNavbar.jsx';
import BottomNavbar from '../Index/IndexPageComponents/BottomNavbar/BottomNavbar.jsx';
import CardContainer from '../Introduction/TarotIntroductionComponents/CardContainer/CardContainer.jsx';
import TextContainer from '../Index/IndexPageComponents/TextContainer/TextContainer';

export default function CardCollection() {
    const { cardsName } = useParams();

    const getHoverImg = (defaultImg, hoverImg) => {
        return hoverImg ? hoverImg : defaultImg.replace('.jpg', '-hover.jpg');
    };

    // Data for each Tarot card
    const collectionCardData = {
        'major-arcana': [
            // Card data here
        ],
        'minor-arcana': [
            // Card data here
        ],
    };

    const cardData = collectionCardData[cardsName];

    if (!cardData) {
        return <div>Card data not found</div>;
    }

    return (
        <div className='background_image'>
            <TopNavbar />
            <TextContainer 
                title={cardsName} // Assuming you want to display the category name as title
            />
            <div className='card-container-wrapper-major-arcana'>
                {cardData.map((card, index) => (
                    <CardContainer
                        key={index}
                        img={card.img}
                        hoverImg={card.hoverImg}
                        link={card.link}
                    />
                ))}
            </div>
            
            <div className="success-story-box-container">
                <SuccessStory />
                <SuccessStory />
                <SuccessStory />
            </div>
            <ContactNavbar />
            <div className="success-story-box-container">
                <SuccessStory />
                <SuccessStory />
                <SuccessStory />
            </div>
            <BottomNavbar />
        </div>
    );
}

我已验证图像路径和悬停图像路径是否正确，并且 getHoverImg 函数按预期工作。但是，图像仍然没有出现在页面上。

（我在另一个组件中使用相同的图像，并且它们正在渲染，因此与文件名或存在无关）

Answer 1

如何/在哪里调用 getHoverImg 函数？您也可以提供该代码吗？