export default function Product({id}: ProductData) {
    const [img, setImage] = useState<string>(IMAGE_API_BACKUP)
    const item = items[id]

    useEffect(() => {
        async function fetchProduct() {
            const url = await fetchUrl(id)
            url && setImage(url)
        }

        fetchProduct()
    }, [])
    
    function handleClick() {
        window.location.href = `/product/${id}`
    }

    console.log("hereyeyah", img)
    return (
        <div className="bg-[#191919] h-[37vh] rounded-xl overflow-hidden" onClick={handleClick}>
            <div className="h-[25vh] w-auto relative">
                <Image src={img} alt={item.name} fill={true} />
            </div>
            <div className="h-[12vh] m-4 overflow-hidden">
                <h1 className="text-xl font-bold">{item.name}</h1>
                <h2>{item.price} ({item.stock_quantity} in stock)</h2>
                <p>{item.description}</p>
            </div>
        </div>
    )
}

Error: Failed to parse src "Error fetching image" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

Clearly all the paths are not relative and start with https. Didnt find much info about this error online. Anyone got ideas?
(Commenting out this line silences the error: <Image src={img} alt={item.name} fill={true} />)

Please ping, not watching actively