img not displaying for first marquee cycle, only for the second cycle

[matrixvivi]

i have an img element sandwiched between h1 text that do not appear in the first iteration of the marquee, but shows in the second cycle. I don't understand why this is occurring, as the code should be the same/constant for both cycles. I inspected element, and it seems like the imgs that aren't displaying are positioned above the marquee and viewport, making them not visible, but I don't know why they are positioned like such.

screenshots:

• img visible (the blue circle):
• img invisible (the blue circle):

code:

• js:

<div` className="headline">
                <Marquee pauseOnHover='true' speed={50} className='marquee-ctn'>
                    <img src={Img} className='img-style' />
                    <h1>CHRIS KANG's WEBSITE</h1>
                    <img src={Img} className='img-style' />
                    <h1>CHRIS KANG's PORTFOLIO</h1>
                    <img src={Img} className='img-style' />
                    <h1>CHRIS KANG's WEBSITE</h1>
                    <img src={Img} className='img-style' />
                    <h1>CHRIS KANG's PORTFOLIO</h1>
                </Marquee>
            </div>

• css:

.marquee-ctn` {
    height: 56px;
    margin-top: -2px
}

.marquee-ctn h1{
    padding: 0 0.5em 0 0.5em;
}

.img-style {
    height: 40px;
    width: auto;
}

[raqibnur]

Same thing are happening with me also

[jdross]

I am encountering the same issue on mobile only for a marquee of only images. Only the images seen initially load, unless the marquee is tapped

[jdross]

This was due to lazy loading in Next Image. Resolved with eager loading