CODEWITHSUNDEEP
javascriptreactjsreact-component
Wiaan.Duvenhage
Wiaan.Duvenhage

Reputation: 51

How do I add an <img> in my React component?

Hey guys I've been struggling with this for quite a while. I want to implement a logo into my nav component, but it just renders as a broken image. I specified where the file is exactly but it still appears a broken img file.

React Component (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;

Any tips on what I could have done wrong?

T.I.A

Upvotes: 0

Views: 49

Answers (1)

Esteban Torres
Esteban Torres

Reputation: 101

You may want to add your image like

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;

Upvotes: 1

Related Questions