How to hide the <img> tag icon when the image is not found?

Question

I made a button of upload which displays a preview of the selected image, but for this, the tag img has its attribute src empty. So this icon which is pointed with the arrow.

I’ve tried everything, I put the attributes title, alt and yet it keeps showing! So I had the idea to use javascript but I didn’t succeed either!

The attributes alt and title were filled, so I came to the conclusion that it’s not because they’re empty..

<div class="image">
    <img src="" alt="" title="" />
</div>

With Javascript, I select the tag img and check if the attribute src is "null", if yes, sets the style display like "None," but it hasn’t worked yet!

const img = document.querySelector("img").src;

if (src == null) {
    img.style.display = "none";
}

Here’s the whole structure inside the body page

<div class="container">
   <div class="wrapper">

      <div class="image">
         <img src="" alt="" title="">
      </div>

      <div class="content">
         <div class="icon">
            <i class="fas fa-cloud-upload-alt"></i>
         </div>
         <div class="text">
            Nenhuma Imagem Selecionada
         </div>
      </div>
      <div id="cancel-btn">
         <i class="fas fa-times"></i>
      </div>
      <div class="file-name">
         File name here
      </div>
   </div>
   <button onclick="defaultBtnActive()" id="custom-btn">Selecione uma Imagem</button>
   <input id="default-btn" type="file" hidden>
</div>

How do I hide that icon when there is no image?