I am experiencing an issue with my [trainers].tsx page where the data loads correctly, but the image does not load properly. Instead, I can see a previous image from another page (../2) before the correct image is displayed.
For instance, when I navigate to ../1, the image loads as expected. However, when I navigate to ../2, I initially see the image from ../1 before the image for ../2 appears after a brief delay. What could be causing this problem?
...
export async function getServerSideProps({ params }: { params: any }) {
const program = await API.getProgram(Number(params.trainers));
return { props: { program } };
}
function Trainers(props: any): JSX.Element {
const router = useRouter();
const { trainers } = router.query;
const { data } = useQuery(
`program-${trainers}`,
API.getProgram.bind(null, trainers),
{
initialData: props.program,
}
);
return (
<Layout>
{JSON.stringify(data.preview)}
<div className={"min-h-screen relative"}>
<div className={"h-screen relative"}>
<div className={"w-full h-screen bg-black"}>
<Image
src={data.preview}
layout={"fill"}
objectFit={"cover"}
alt={"preview"}
/>
</div>
...
</div>
</Layout>
);
}
export default Trainers;