feat: add fallback image to article image on show page

Author: Nathan-Cowin

resources/views/articles/show.blade.php

@@ -20,10 +20,15 @@
 
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
-                <div
-                    class="w-full bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 p-6 lg:p-8"
-                    style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url({{ $article->heroImage(2000,384) }});"
-                >
+                <div class="relative w-full bg-center bg-gray-800 p-6 lg:p-8 z-10">
+                    <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
+                         style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))"
+                         src="{{ $article->heroImage(2000,384) }}"
+                         alt="Example image"
+                         onerror="
+                        this.onerror=null;
+                        this.src='images/default-background.svg';"
+                    >
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />