make <a class="navbar-brand" href="index.html"> text </a> into a img

how can I turn

 <a class="navbar-brand" href="index.html"> QuadroStudios </a>

into a image code for my navbar this is my code

 <head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>QuadroStudios</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" media="screen" href="about.css" />
  <!-- <script src='main.js'></script> -->
  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
    crossorigin="anonymous"
  />
</head>

<style>
  body {
    background-color: #212529;
    overflow-x: hidden;
  }
  .about {
    position: relative;
    top: 25px;
    left: 10px;
    color: white;
  }

  .title {
    color: white;
    font-size: 25px;
    font-family: Inconsolata;
  }

  .storehauled {
    position: relative;
    top: 100px;
    left: 30px;
    color: white;
    font-size: 20px;
    font-family: Inconsolata;
  }
</style>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="index.html"> QuadroStudios </a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="home.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="update.html"> Updates </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="leaks.html"> Leaks </a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="about.html">
              About
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="about">
    <h1 class="title">
      Here you can find info about our games and what QuadroStudios is about!
    </h1>
  </div>

  <div class="storehauled">
    <p>
      Storehauled <br />
      On Roblox:
      <a class="robloxgame" href="https://www.roblox.com/games/6258825725">
        Roblox Game
      </a>
      <br />
      Released: 1/18/2021 <br />
      <br />
      Current status: Remaking [in Beta] <br />
      <br />
      Progress: <br />
      UI - Completed <br />
      Map - Mostly completed [70%] <br />
      Users: Brony#0445 Babushka_OP#6118 <br />
      Trello board:
      <a class="trello" href="https://trello.com/b/WzuH9IK3">
        Trello of the Game</a
      >
      <br />
      Early access release: Late Q4 2021 - Beta is the last part of closed
      development. We'll let you know when you can access the game freely.
      <br />
      <br />
      Teasers of the game: <br />
      <br />
      The park is the most chilling place in here... <br />
      <br />
      <img src="teaser1.png" />
    </p>
  </div>
</body>

I couldn't find a way to do it I kept breaking it

Solution

Just put an img tag inside your a[nchor] tag

<a class="navbar-brand" href="index.html"><img src="<your picture>" alt="<your alt text>"></a>

Make sure your navbar-brand class is appropriate, or you might need to add another class to style your img the way you want.