From ad5e1ea4f8f34330dec8a1def19a175ff2ec1fa9 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 12 Jun 2022 23:00:38 +0200
Subject: [PATCH] use default image if vesion dont have image and if error
 occur

---
 .../available-versions/available-version-item.component.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx
index d84ee1b7..5e6ebc3a 100644
--- a/src/renderer/components/available-versions/available-version-item.component.tsx
+++ b/src/renderer/components/available-versions/available-version-item.component.tsx
@@ -4,6 +4,7 @@ import { SteamIcon } from "../svgs/steam-icon.component";
 import { useEffect, useState } from "react";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { distinctUntilChanged } from "rxjs";
+import defaultImage from '../../../../assets/default-version-img.jpg'
 import dateFormat from "dateformat";
 
 export function AvailableVersionItem(props: {version: BSVersion}) {
@@ -35,8 +36,8 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
     <div className="group m-3 relative w-72 h-60" onClick={toggleSelect}>
       <div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "opacity-100"}`}></div>
       <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 bg-main-color-2 cursor-pointer group-hover:shadow-none duration-300 ${!selected && "shadow-lg shadow-gray-900"}`}>
-        <img src={props.version.ReleaseImg} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover"></img>
-        <img src={props.version.ReleaseImg} className="bg-black w-full h-3/4 object-cover"/>
+        <img alt="version image" src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}></img>
+        <img src={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy" onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = defaultImage }}/>
         <div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
           <div>
             <span className="block text-xl font-bold text-white tracking-wider">{props.version.BSVersion}</span>