Make broken images not suck.

broken-image.html

<script>
(() => {
  'use strict'
  
  let styles = `
  .pretty-broken-image {
    visibility: hidden;
    position: relative;
  }

  .pretty-broken-image:after {
    content: 'oops!';
    background: lightblue;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: visible;
    color: white;
    text-align: center;
    line-height: 40px;
  }
  `

  let stylesheet = document.createElement('style')
  stylesheet.innerHTML = styles
  document.body.appendChild(stylesheet)
})()
</script>

<img src="foobar-broken-link.gif" alt="i shouldn't load and this should have ugliness" onerror="this.classList.add('pretty-broken-image')">