External URL image remains blur even when comes into view

[phanatuan]

Hi,

I use your plugin on my Markdown content, and there are images where it remains blur even when come into view. It's blur like this (see the image).

There are 3 images in my markdown content, but only 2 have this problem, 1 image works well. All of them are external URL images.

When I use Chrome Dev tool to inspect, the blur images have this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAAC0UlEQVQ4y42Ry08TURSHZ+Ej6kIFCq2kohEij2mrQaxQirFiQF2gxqCQSIwxGjfG+Eg0LETBF/ggAiomGiGuXLhwb/QfcGOCFJpWsVQt0Pe0VGn5vDMlKNFEb/LlnnvPb37nnDuSLruU3Bz5r+hyysjTmcg3bMKQZ1mYyy77Uy+8JDXI05kz5Pza9bkWIZApMG5lcPAFly62kbWqNJMXOb1aIFs1Ms1/r3rNG+pzzVoXOnHW6y0Y9JuFwIwuS8ZefQDZVKsVMehMWtcbS2yUyDbWrquYM7VoE0lqF6tXlmpkCYxryikurqFwYw3l1nqs9n1stx6m1ryXXY4WKh0HKSi0sa7Qilxdx4ayGjGRSes6VzU05m/CunUn1goHFnMVJpOdovU2Couq2HPoGKcuXOZMSwdXm85z8shZjp+7RIWjEXP5buQtdRSJ4sb8ctYYNoupLEgrlhvZsaOO+r37sNc4kOVt6AwWMUoJDftbaG46jb2qGVvlCRrqj7J/dyNyZQNri22syhKTiR+xfNl6li4uYMkiI1JH+z1aW2/Q1n6Hi623aLvRx82eR9y+/5AH/c/pf/aSOz2DdHYP0N07wN2+J/Q+fkLf0wG6unro7Oqjo72bax0q95D4baUFM3NxIpU5f0+lScykmGXhmk4kmE2r6oUZaUYZx+d5h398mPCEi7DfReDbCIGvTo3olJvYlIfIpJuguJ9JTBBTFEacTkY/efF8meSzPyCYIhQKI81OfxMmTmLBMdLT/nlSv8XpZIbU9FcxQhBFieNyjfJ+aJgPLg9Do27cY+NEo1GkZPI7kUhEiBRtD4fDgohWTUUVBUMhQuJe1agrHo8zLDp0ez4y7vPh9Xq1PRAMISlKjEBginQ6TSqV+icZwwRjnz4S8H0mOuknGQmJx07wI6GohgqxWEyr+j+o75eMKzh9E7S9/sC1N8Ncf+vkyhsnr4a8/AT6w7OFRG63jgAAAABJRU5ErkJggg==" title="null" alt="null" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: blur(50px); transform: scale(1);">

The well-working image has css/html like this:

I follow your Code Sandbox Demo to set it up.

Really appreciate if you could take a look.

Thank you.

[d4rekanguok]

Hi @phanatuan, I'll check the sandbox demo to see what went wrong. Thanks for opening an issue! We're also looking to implement this feature in the default markup.

[phanatuan]

Hi @d4rekanguok, thanks for your reply.

I notice that 10% of the time, all the images render well. I have a theory that there's something wrong with the detection of when image comes into view. Maybe it thinks the image does not come in yet and renders it blur the whole time.

One more thing I notice is that the 1st image in the content always works well. The problem only happens from the 2nd image item onwards.

Hope it helps,

Tuan.