Question

我正在通过 React 构建网站，但我的本地图像没有显示。我使用 props 将属性从 Cards.js 传递到 CardItem.js，然后显示除图像之外的每个属性。我不知道我的代码有什么问题:(

这是 Cards.js：

import React from 'react'
import CardItem from './CardItem'
import './Cards.css'

function Cards() {
    return (
        <div className="cards">
            <h1>Check out these EPIC Destinations!</h1>
            <div className="cards-container">
                <div className="cards-wrapper">
                    <ul className="cards-items">
                        <CardItem
                            src='../assets/images/img-9.jpg'
                            text='Explore the hidden waterfall deep inside the Amazon Jungle'
                            label='Adventure'
                            path='/sevices'
                        />
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Cards

CardItem.js：

import React from 'react'
import { Link } from 'react-router-dom'

function CardItem(props) {
    return (
        <>
            <li className="cards-item">
                <Link className="cards-item-link" to={props.path}>
                    <figure className="cards-item-pic-wrap" data-category={props.label}>
                        <img src={props.src} alt="Travel Img" className="cards-item-img" />
                    </figure>
                    <div className="cards-item-info">
                        <h5 className="cards-item-text">{props.text}</h5>
                    </div>
                </Link>
            </li>
        </>
    )
}

export default CardItem

Answer 1

我们要先导入图片

import img from './assets/images/img-9.jpg';

我们将图像命名为 img，请在您的代码中使用它。

import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
import img from './assets/images/img-9.jpg';

function Cards() {
    return (
        <div className="cards">
            <h1>Check out these EPIC Destinations!</h1>
            <div className="cards-container">
                <div className="cards-wrapper">
                    <ul className="cards-items">
                        <CardItem
                            src={img}
                            text='Explore the hidden waterfall deep inside the Amazon Jungle'
                            label='Adventure'
                            path='/sevices'
                        />
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Cards

Answer 2

import img from '../assets/images/img-9.jpg'
...
<CardItem src={img} .../>

图像不显示反应

2 个答案: