Having a bit of an issue with images from blogposts made on the sanity.io dashboard not displaying images on my page
Ill supply the relevant code here :)
Page.tsx

export default async function Home() {
  const projects = await getProjects();

  return (
    <div className="max-w-5xl mx-auto py-20">
      <h1 className="text-7xl font-extrabold">Hello I&apos;m
        <span className="bg-gradient-to-r from-sky-500 via-violet-500 to-blue-700 bg-clip-text text-transparent"> Inside!</span>
      </h1>
      <p className="mt-3 text-xl text-gray-500">Hello! check out my projects here:</p>

      <h2 className="mt-24 font-bold text-gray-700 text-3xl">My Projects</h2>

      <div className="mt-5 grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {projects.map((project) => (
            <div key={project._id} className="border-2 border-gray-500 rounded-lg p-1 hover:scale-105 hover:border-blue-500 transition">
              {project.image && (
                <Image
                  src={project.image}
                  alt={project.name}
                  width={250}
                  height={100}
                  className="object-cover rounded-lg border border-gray-500"
                />
              )}
              <div className="mt-2 font-extrabold bg-gradient-to-r from-sky-500 via-violet-500 to-blue-700 bg-clip-text text-transparent">
                {project.name}
              </div>
            </div>
        ))}
      </div>
    </div>
  )
}

I'm not receiving any errors its just not showing the image as expected. There should be an image above the "test" text!