CODEWITHSUNDEEP
reactjsreact-bootstrap
VonHugenstein
VonHugenstein

Reputation: 119

Bootstrap Navbar icon not displaying

I'm new to React and Bootstrap. I'm using Bootstrap 5.1.

I'm trying to create a Navbar with my logo in it. No matter what I try, I can't get the image to display. Here is my Navbar.js

import React from 'react';

function Navbar() { 
    return (
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">
                <img alt="House" src="/img/logo.svg" width="30" height="30"/>
              </a>
            </div>
          </div>
        </nav>
    )
 }

 export default Navbar

The path to the logo is here, '/react-app/src/img/logo.svg' and I've tried pathing it multiple different ways without success.

And here is what I see.

enter image description here

What am I missing?

Upvotes: 1

Views: 1046

Answers (4)

nihilok
nihilok

Reputation: 2113

You should keep your image somewhere inside the src as you are doing (contrary to other suggestions) and import it like a module. The only time you might use the public folder is (maybe) if you wanted to preload the image or use the image as an icon for the app.

import React from 'react';
import img from './img/image.jpg'        // or '../path/relative/to/component/image.jpg'

function Navbar() { 
    return (
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">
                <img alt="House" src={img} width="30" height="30"/>
              </a>
            </div>
          </div>
        </nav>
    )
}

export default Navbar

Upvotes: 2

Md Saif Uddin
Md Saif Uddin

Reputation: 341

You need to import the image for example:

import imageName from './img/logo2.png';
        
<img alt="House" src={imageName} width="30" height="30"/>

Upvotes: 1

Cuong Vu
Cuong Vu

Reputation: 3733

You need to use import to load the path like this:

import houseImgPath from './img/logo2.png' // replace with your own path

and then use it in your img src

 <img alt="House" src={houseImgPath} width="30" height="30"/>

Upvotes: 2

mmantach
mmantach

Reputation: 148

you need to put images in public folder in order to get this path img/logo2.png try it please and let me know

Upvotes: -1

Related Questions