Image.tsx

import React from "react"
import {
    StaticImage,
    IGatsbyImageData,
    GatsbyImage,
    getImage,
} from "gatsby-plugin-image"

export interface Iimage {
    image?: string | IGatsbyImageData
    className?: string
}

const Image = (props: Iimage) => {
    const { image, className = "" } = props

    const imageClassname = ` ${className}`

    const imageNoAvailable = (
        <StaticImage
            src="../../images/no-image-available.jpg"
            alt="no-image-available"
            className={imageClassname}
        />
    )

    if (!image || typeof image == "undefined") {
        return <>{imageNoAvailable}</>
    }

    if (typeof image == "string") {
        return (
            <>
                <img src={image} alt={image} className={imageClassname} />
            </>
        )
    }

    const img = getImage(image)
    if (typeof img == "undefined") {
        return <>{imageNoAvailable}</>
    }

    return (
        <>
            <GatsbyImage
                image={img}
                alt="gatsby-image"
                className={imageClassname}
            />
        </>
    )
}

export default Image