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
Ted
Ted9mo 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
KCIBUR9mo 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.
Want results from more Discord servers?
Add your server