Skip to content

Commit

Permalink
feat: create Image component
Browse files Browse the repository at this point in the history
  • Loading branch information
zeim839 committed Jun 29, 2024
1 parent 09c9ef1 commit 1883b6f
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/Image/Image.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.dynamic-image picture, img, source {
width: 100%;
height: 100%;
object-fit: cover;
}
28 changes: 28 additions & 0 deletions src/Image/Image.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react'
import './Image.css'

// Creates a dynamically loaded image.
const Image = ({ src, type, alt, lazy, width, height, className, style }) => {
const lazyLoading = (lazy === true)
const imgalt = alt || 'Bytes of Love image'
return (
<div className={className} style={style}>
<div style={{ width, height }}>
<picture className='dynamic-image'>
<source
loading={(lazyLoading) ? 'lazy' : ''}
alt={imgalt} type={type} src={src} width={width}
height={height}
/>
<img
loading={(lazyLoading) ? 'lazy' : ''}
alt={imgalt} type={type} src={src} width={width}
height={height}
/>
</picture>
</div>
</div>
)
}

export default Image

0 comments on commit 1883b6f

Please sign in to comment.