Next wont load images.

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;

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?

2 Replies

TedOP•10mo ago

This is how I am displaying the image:

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

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

Works fine with img tag.

KCIBUR•10mo ago

Hi! Make sure that cardValue\cardSuit have values when next\image trying to render it first time.
If it still doesn't work you can try to get images with const imageSrc = require(${card}) and then use them in next/image as src={imageSrc} . You can add memo to optimize this method. I think you don't want to preload whole folder of images when users opens some page , that will hit your page speed.

Gaming

Programming

Next wont load images.