Hello everyone,
I am stuck on an issue with my app pixelperfecthome.com. Is an app that takes in an image of your home and generates an ai photo based on a theme you specify.
The app loads the output image on my computer, my laptop, even when I inspect element and toggle the device as a phone. But for some reason when I try generating an image from my phone it only shows a broken jpeg symbol.
This is the code, PreviewImg Component:

'use client' import React, { use } from 'react' import logoicon from '@/assets/pixel-perfect-home-logo-slate.svg'; import {useFileName, useLoading, useOutput} from '@/store/useStore'; import Image from 'next/image'; function PreviewImg() { const isLoading = useLoading((state:any) => state.isLoading); const isGenerating = useLoading((state:any) => state.isGenerating); const output = useOutput((state:any) => state.output); const fileName = useFileName((state:any) => state.fileName); return isLoading ? ( <div className={${isGenerating && "animate-pulse"} md:w-[500px] w-[350px] h-[200px] my-auto md:h-[300px] bg-slate-100 rounded-lg flex items-center justify-center}> <Image src={logoicon} alt='place holder' height={60} width={60} /> </div> ) : ( <div className='my-auto '> <img src={output} alt='output' className='object-cover rounded-lg'/> <p className='text-sm text-slate-700'>{fileName}</p> </div> ) } export default PreviewImg

I tried using both next/image and regular html img tag but both doesn't work.