use default image if vesion dont have image and if error occur

This commit is contained in:
MathieuG-P
2022-06-12 23:00:38 +02:00
parent bd0a05e0fd
commit ad5e1ea4f8
@@ -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>