Hello,

I have an image on my site where the path is generated though a function.

It returns:

return `/images/cards/${cardValue}${cardSuit}.svg` as Card;

It will never load unless I open up the image in a new tab and then go back... I am assuming this is similar to how you cant add tailwind classes.. What is the best way to fix this? Is there a way to have a folder of images be preloaded?

<Image
          src={card as string}
          loading="eager"
          alt={`${
            (card as string).split("/").pop()?.split(".")[0] ?? "Card"
          } Card`}
          width={250}
          height={250}
          priority
        />

Thanks in advanced to anyone who helps.