Logo on navbar is not displaying

Question

I am creating a website with the react.js framework and am very new to it. I am trying to get my logo on the bootstrap navbar. However, it seems that the image is not displaying.

This is the code for my navigation bar

<nav className="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="mainNav">
            <div className="container">
                <a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="navbar-logo.svg" alt="" /></a>
                <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i className="fas fa-bars ml-1"></i>
                </button>
                <div className="collapse navbar-collapse" id="navbarResponsive">
                    <ul className="navbar-nav text-uppercase ml-auto">
                        <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li>
                        <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Facilities</a></li>
                        <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li>
                        <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Executives</a></li>
                        <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Answer 1

You need to import image. You can't add src like this in react:

Do this:

Import logo

import myLogo from 'navbar-logo.svg';

Add logo src:

<img src={myLogo} alt="" />

...your rest of code

Answer 2

If you want to show logo you must use html tag :

 <!DOCTYPE html> <html> <head> <link media rel="icon" href="##your logo url" type="image/png" /> </head> <body> ##content </body> </html>

Answer 3

Try like this

 .logo { height:25px; }

 <nav className="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="mainNav"> <div className="container"> <a className="navbar-brand js-scroll-trigger" href="#page-top"><img src="https://i.picsum.photos/id/1029/4887/2759.jpg?hmac=uMSExsgG8_PWwP9he9Y0LQ4bFDLlij7voa9lU9KMXDE" alt="" class="logo"/></a> <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> Menu <i className="fas fa-bars ml-1"></i> </button> <div className="collapse navbar-collapse" id="navbarResponsive"> <ul className="navbar-nav text-uppercase ml-auto"> <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#services">Services</a></li> <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#portfolio">Facilities</a></li> <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#about">About</a></li> <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#team">Executives</a></li> <li className="nav-item"><a className="nav-link js-scroll-trigger" href="#contact">Contact</a></li> </ul> </div> </div> </nav>

if you want to use a local image, import from your project and pass to src

import Logo from './path_name';

pass like this.

<img src={Logo} alt="" class="logo"/>

Logo on navbar is not displaying

Question

3 answers

solution1
2 2020-08-31 06:04:54

solution2
1 2020-08-31 06:07:45

solution3
0 2020-08-31 06:06:45

Logo on navbar is not displaying

Question

3 answers

solution1 2 2020-08-31 06:04:54

solution2 1 2020-08-31 06:07:45

solution3 0 2020-08-31 06:06:45

solution1
2 2020-08-31 06:04:54

solution2
1 2020-08-31 06:07:45

solution3
0 2020-08-31 06:06:45