Reactjs 图像不'；t显示反应

我正在通过react建立一个网站，但我的本地图像没有显示出来。我使用道具将属性从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

从“React”导入React
从“/CardItem”导入CardItem
导入“./Cards.css”
功能卡（）{
返回(
看看这些史诗般的目的地！


)
}
导出默认卡

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

从“React”导入React
从“react router dom”导入{Link}
功能卡片（道具）{
返回(

{props.text}

)
}
导出默认项

我们想先导入图像

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

从“React”导入React
从“/CardItem”导入CardItem
导入“./Cards.css”
从“/assets/images/img-9.jpg”导入img；
功能卡（）{
返回(
看看这些史诗般的目的地！


)
}
导出默认卡

从“../assets/images/img-9.jpg”导入img
...

试试这个html输出是什么？您确定

src

属性指向有效的图像文件url吗？我已经使用了“require”但它不起作用。@DolevDublon导入这样的图像需要webpack。他们没有提到他们正在使用webpack。代码转储并不能得到很好的答案。你应该解释这是如何以及为什么解决他们的问题的。我建议阅读，”

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