search

d4rekanguok / gatsby-remark-images-anywhere

Handle images with relative, absolute & remote path for gatsby-transformer-remark & gatsby-plugin-mdx
MIT License
22 stars 8 forks source link

External URL image remains blur even when comes into view #21

Open phanatuan opened 4 years ago

phanatuan commented 4 years ago

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).

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: image

I follow your Code Sandbox Demo to set it up.

Really appreciate if you could take a look.

Thank you.

d4rekanguok commented 4 years ago

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 commented 4 years ago

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.