Search code examples
reactjsreact-navigationreact-bootstrapreact-componentreact-bootstrap4-modal

Why my image is not showing in browser even after importing BImg from bootstrap4-react?

I am following the below documentation:- https://bootstrap-4-react.com/#documentation/components/navbar

And i am trying to implement the below code.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Navbar, Nav, Button, Dropdown, Form, Collapse } from 'bootstrap-4-react';
import { BImg } from 'bootstrap-4-react';
export default class Header extends Component {
render() {
const bootstrap_icon = 'C:\md5\public\logo.svg';
return (
<Navbar expand="lg" light bg="light">
<Navbar.Brand href="#">
<BImg
src={bootstrap_icon}
width="30"
height="30"
display="inline-block"
align="top"
mr="1"
/>
</Navbar.Brand>
</Navbar>
)}}

But i am not getting image output. I tried by defining different paths.

Nothing is being shown as output 1.

Solution

  • Image must be placed in the public folder. Then no need to define the full path. It would be then const bootstrap_icon = 'logo.svg';