我如何添加一个<img>在我的 React 组件中？

Question

嘿伙计们，我已经为此苦苦挣扎了一段时间。 我想在我的导航组件中实现一个徽标，但它只是呈现为损坏的图像。 我指定了文件的确切位置，但它仍然显示为损坏的 img 文件。

反应组件 (nav.js)

import './Nav.css';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import { Link } from 'react-router-dom';

const Nav = () => {
    return(
        <nav>
            <img src='../components/assets/logo.png'/>
            <ul>
                <Link to="/"><li className='dashboard'><i class="fa-solid fa-gauge"></i></li></Link>
                <Link to="Compare"><li className='compare'><i class="fa-solid fa-scale-balanced"></i></li></Link>
                <Link to="Timeline"><li className='timeline'><i class="fa-solid fa-timeline"></i></li></Link>

                <div className='about'>
                    <p>About LOLDATA</p>
                    <p>About the API</p>
                </div>

                
            </ul>
        </nav>
    )
}

export default Nav;

关于我可能做错了什么的任何提示？

TIA

Answer 1

你可能想添加你的图像

import React from 'react';
import './Nav.css';
import "https://kit.fontawesome.com/3d7d8906d0.js";
import { Link } from 'react-router-dom';
import logo from '../components/assets/logo.png'; // Tell webpack this JS file uses this image

const Nav = () => {
    return(
        <nav>
            <img src={logo}/>
            <ul>
                <Link to="/"><li className='dashboard'><i class="fa-solid fa-gauge"></i></li></Link>
                <Link to="Compare"><li className='compare'><i class="fa-solid fa-scale-balanced"></i></li></Link>
                <Link to="Timeline"><li className='timeline'><i class="fa-solid fa-timeline"></i></li></Link>

                <div className='about'>
                    <p>About LOLDATA</p>
                    <p>About the API</p>
                </div>

                
            </ul>
        </nav>
    )
}

export default Nav;