Hello guys!

I am creating a SSG site using the pages router. I am populating the pages with data from a database. That database also has the paths to the images I am trying to use. However when trying to use the Image component from nextjs I am getting the error to specify width and height.

I know what that error means, but how should I tackle my problem? I cant specify the width and height properties from the data im getting since im only getting the image paths. An example of how one of the cats cat.imageslook like is :

const images = ['/static/images/Elsa_forside-300x300.jpg', '/static/images/Elsa_02-1024x844.jpg', '/static/images/Elsa_04.jpg']

As you can see they are just paths. Im trying to programattically create profile pages for over 100 cats and all the pictures im gonna use is in that array. I would like to get the same benefits as you would get if you manually imported:

import ElsaForside from '../../static/images/Else_forside-300x300.jpg'

Here is the code from the [slug].tsx file im using to create the seperate profile pages for each cat.

function Cats({ cat }) {
  const profileImg = JSON.parse(cat.images)[0].split("/").at(-1);

  return (
    <>
          <p>{cat.name}</p>
          <Image
            src={`/static/images/${profileImg}`}
            alt={`${cat.name} picture`}
            width={300}
            height={300}
            className="rounded-full"
          />
    </>
  );
} 

Anyone got some recommandation what I should do? Thanks in advance!