How to set a fallback image for a slider

fallback-image.html

<section class="slider">
  <img src="andrew-and-artist.jpg" onerror='this.src="./andrew-and-artist.jpg"' />
  <nav class="slider-nav">
    <ul>
      <li class="arrow">
        <a href="#"><i class="fa fa-long-arrow-left"></i></a>
      </li>
      <li class="arrow">
        <a href="#"><i class="fa fa-long-arrow-right"></i></a>
      </li>
    </ul>
  </nav>
</section>

<script type="text/javascript">

  $('.arrow').on('click', function(e) {

    e.preventDefault(); //  stop the page reloading

    $('.slider img').prop('src', 'http://lorempixel.com/1000/600/abstract?' + Math.random());
  });

</script>