htmlimagetagssrcbroken-image

Image not broken but not showing

I have this HTML:

<html>

  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>
    <script type="text/javascript" src="callback.js"></script>

  </head>

  <!-- Calls printResponse() when this page loads -->
  <body style="background-color: #ddeaff; text-align: center; margin-top: 100px">
    <img src="assets/bazlogofinal.png" height="720" width="720" style="display: block; margin-left: auto; margin-right: auto;">
    <div style="width: 100%; text-align: center; font-family: 'Helvetica'; font-size: 96px; color: #357aff; font-weight: 900">PLEASE WAIT...</div>
    <div id="url" style="display: none">
          <!-- empty URL for displaying response -->
    </div>
  </body>

</html>

The src for the img is correct, and the image isn't broken:

enter image description here

I have tried clearing the browser history on my phone.

Solution

  • This can happen when the image/file size is large (as it needs to load in the image). Try making the image/file size smaller.

    You can make the image smaller using Photoshop’s save for web option or other lossless/lossy compression algorithms.