Image.tsx

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

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

const Image = (props: Iimage) => {
    const {
        image,
        className = "",
        objectPosition = "50% 50%",
        objectFit = "cover",
    } = props

    const imageClassname = ` ${className}`

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

    if (image == "mock-square") {
        return (
            <StaticImage
                src="../../images/400x400.png"
                alt="no-image-available"
                className={imageClassname}
                objectFit={objectFit}
            />
        )
    }
    if (image == "mock-landscape") {
        return (
            <StaticImage
                src="../../images/800x400.png"
                alt="no-image-available"
                className={imageClassname}
                objectFit={objectFit}
            />
        )
    }
    if (image == "mock-portrait") {
        return (
            <StaticImage
                src="../../images/400x800.png"
                alt="no-image-available"
                className={imageClassname}
                objectFit={objectFit}
            />
        )
    }

    if (!image || typeof image == "undefined" || image == "mock") {
        return imageNoAvailable
    }

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

    const img = getImage(image)
    if (typeof img == "undefined") {
        // SVG image
        if (image.publicURL) {
            return (
                <img
                    src={image.publicURL}
                    alt={image.name}
                    className={imageClassname}
                />
            )
        }

        return imageNoAvailable
    }

    // PNG image
    return (
        <GatsbyImage
            image={img}
            alt={image.name}
            className={imageClassname}
            objectFit={objectFit}
            objectPosition={objectPosition}
        />
    )
}

export default Image