Image Image.tsx

80% Statements 4/5

100% Branches 0/0

50% Functions 1/2

80% Lines 4/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35  
 
 
 
 
 
 
 
 
 
 
 
3x
8x
 
8x
 
 
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState } from 'react';
import styles from './Image.module.scss';
import NoThumb from 'assets/default.jpg';
import { clsx } from 'helpers/utils';
interface Props extends React.ImgHTMLAttributes<HTMLImageElement> {
    src: string;
    alt: string;
    containerClassName?: string;
    containerAttributes?: Record<string, any>;
    className?: string;
}
 
const Image = ({ src, alt, containerAttributes, containerClassName, className, ...rest }: Props) => {
    const [thumb, setThumb] = useState(src);
 
    const handleNoImage = () => {
        // Fallback to default image if no thumb found in response
        setThumb(NoThumb)
    }
 
    return (
        <figure className={clsx(styles.figure, containerClassName)} {...containerAttributes}>
            <img
                className={clsx(styles.figure__img, className)}
                src={thumb}
                alt={alt}
                onError={handleNoImage}
                {...rest}
            />
        </figure>
    )
}
 
export default Image