maiden spoke
my project has many images and for display it I use next/image.
After I reload page in browser many of them does not display.
They shows for a second and then browser display empty parent element.
In dev tools source I see the correct ways for image. But if use application navigation on site its work correctly. Only if I reload the page using browser reload.
my component:
`import { FC } from 'react';
import Image, { StaticImageData } from 'next/image';
export interface IStudioImg {
id: number;
src: StaticImageData ;
alt: string;
backgroundColor: string;
backgroundImage?: StaticImageData;
modifier?: string;
}
interface Props {
image: IStudioImg;
}
const Item: FC<Props> = ({ image }) => (
<div
style={ image.backgroundImage ? { backgroundImage: url(${ image.backgroundImage.src }) } : { backgroundColor: image.backgroundColor } }
className="image__container"
<Image
src={ image.src }
alt="alt text"
priority
quality={ 70 }
width="987"
height="555"
className="image__item"
/>
</div>
);
export default Item;
`
dense hamlet
