zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

use custom image component for slideshow

Browse Source
This commit is contained in:
MathieuG-P
2022-10-15 18:46:48 +02:00
parent 594a71ee36
commit 9fbceb1fe4
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/bsm-image.component.tsx
+4 -2
View File
@@ -1,6 +1,8 @@
export function BsmImage({className, image, errorImage, placeholder, loading}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager"}) {
import { CSSProperties } from "react";
export function BsmImage({className, image, errorImage, placeholder, loading, style}: {className?: string, image: string, errorImage?: string, placeholder?: string, loading?: "lazy"|"eager", style?: CSSProperties}) {
return (
<img className={className} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage ? errorImage : "" }} style={{backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}}/>
<img className={`${className} pointer-events-none`} src={image} loading={loading} onError={({currentTarget}) => { currentTarget.onerror = null; currentTarget.src = errorImage || "" }} style={{...style, backgroundImage: `url(${placeholder})`, backgroundSize: "cover"}} alt=""/>
)
}
src/renderer/components/slideshow/slideshow.component.tsx
+2 -1
View File
@@ -1,10 +1,11 @@
import { BsmImage } from '../shared/bsm-image.component';
import './slideshow.component.css';
export function Slideshow(props: {className: string, images: string[]}) {
return (
<div className={`slide ${props.className}`}>
{
props.images.map((i, index) => <img key={index} className='w-full h-full object-cover' src={i} style={{animationDelay: `${index * 10}s`}}></img>)
props.images.map((i, index) => <BsmImage key={i} className='w-full h-full object-cover' image={i} style={{animationDelay: `${index * 10}s`}}/>)
}
</div>
)