ReactStrap import wont allow me to display logo on navbar component-CodePudding

I'm building a business website for a company and using react and ReactStrap. I have built a navbar.jsx component in my src/components folder, it has its respective CSS file. As soon as I try to use ReactStrap by importing the CSS file like everything else in app.js or any other file relevant to the position, the logo will not display, and the closer I get is a display error showing the alt command with the name. Once I take out the imported ReactStrap CSS file its displayed again, but I'm trying to put a carousel and without the imported file it wont work.

this is my code for my Navbar.jsx component:

import { NavLink } from "react-router-dom";
import "./Navbar.css";

function Navbar() {
  return (
    <>
    <div className="test">
      <nav className="navigation">
          <a href="/">
            <img className="logo" src='/public/Imagenes/picwish.png' alt="logo" />
          </a>
          <div className="dropdown">
             <button className="dropbtn">PRODUCTOS</button>
             <div className="dropdown-content">
                 <a href="/products">ALL PRODUCTS</a>
                 <a href="/products/adept">ADEPT</a>
                 <a href="/products/cardiatis">CARDIATIS</a>
                 <a href="/products/fungible">FUNGIBLE</a>
             </div>
             </div>
              <a href="/aboutus" className="link-nav">
                <NavLink className="links" to={"/aboutus"}>
                  ABOUT US
                </NavLink>
              </a>
              <a href="/contact" className="link-nav">
                <NavLink className="links" to={"/contact"}>
                  CONTACT US
                </NavLink>
              </a>
              <a href="/Faq" className="link-nav">
                <NavLink className="links" id="faq" to={"/faq"}>
                  FAQ
                </NavLink>
              </a>
      </nav>
      </div>
    </>
  );
}

export default Navbar;

I have tried importing the image, using the src directly, and even props to no avail. I know there is a conflict with

import 'bootstrap/dist/css/bootstrap.min.css';

But I'd really rather not build a carousel from scratch. Any takes on why is this happening? Thank you in advance.

https://i.stack.imgur.com/l95xS.png

CodePudding user response：

Change these lines...

<nav className="navigation">
  <a href="/">
    <img className="logo" src='/public/Imagenes/picwish.png' alt="logo" />
  </a>

... to this:

import {Navbar, NavbarBrand} from 'reactstrap' import logo from '../.....'

<Navbar id="topnav" color="white" expand="xl">
  <NavbarBrand href="/">
    <img src={logo} height="80" width="253" alt="" />
  </NavbarBrand>
  . . .

CodePudding user response：

<img src={require('your file directory')} height="80" width="253" alt="" />

for your file directory, if it is in the same folder start with ./

if your file directory is in a folder is in a different folder use ../