Discussion on: Handling Image Loading Errors - img tag onerror

[Shrihari Mohan]

If you dont want to use Javascript you use the <object> tag

<object data="https://picsum.photos/id/237/200/300" class="image-container">
  <img src="https://picsum.photos/200/300" />
</object>

[IamSh]

Nice - This will work good with little bit of modification in css

<div class="image-container">
  <object width="100%" height="100%" data="https://m.media-amazon.com/images/M/MV5BOTI5ZTNkYWQtNDg2Mi00MTBmLTliMGItNTI5YWI5OTZkM2Y2XkEyXkFqcGdeQXVyNzU1NzE3NTg@._V1_QL75_UX500_CR0,47,500,281_.jpg">
    <img src="https://resizing.flixster.com/-XZAfHZM39UwaGJIFWKAE8fS0ak=/v3/t/assets/p10449498_i_h10_aa.jpg" alt="Fallback Image">
  </object>
</div>

<!-- Other content -->

<!-- CSS Styles for Object with Fallback Image -->
<style>
  .image-container {
    width: 100%;
    height: 500px;
    /* Set the height of the container */
    position: relative;
    /* Required for children positioning */
  }

  .image-container object,
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

[Shrihari Mohan]

Thanks for extending!