Default image placeholder blur persists in background for transparent .png images

[benceruleanlu]

Expected Behaviour

A blurry image is used as a placeholder until the image loads.

Issue

The blurry image persists as a "background-image" for .png images with transparent backgrounds.

Example

[dimaMachina]

please share your image, to found a workaround

[benceruleanlu]

The image I personally used is linked here: https://imgur.com/a/pqw6hNM.

With devtools, this is the generated placeholder:

[dimaMachina]

I don't think this is an issue with Nextra, this is an upstream issue from Next.js Image component

How would you like to fix it in Nextra without your workaround with the manual import of NextImage?

[benceruleanlu]

In terms of fixing this problem in Nextra, I don't think anything should be done as the opinionated default inclusion of <Image> prop placeholder="blur" is usually a good choice for most images. If the developer has any issues, they should just use <Image> and not add the placeholder="blur" prop.

However, I disagree on this being purely an upstream issue with Next.js.

After testing the placeholder="blur" prop on an <Image> component inside a Nextra project, I can confirm that the blur does persist.

However, when testing the placeholder="blur" prop on an <Image> component inside a new Next.js project with create-next-app, the placeholder is briefly seen along with the regular image loaded in front, but the blurry placeholder is soon removed as everything finishes loading.

I'm not too familiar with Nextra's codebase, so I am not aware of how Nextra implemented the blur, or if they used <Image> with the prop placeholder="blur" at all.

[dimaMachina]

However, when testing the placeholder="blur" prop on an component inside a new Next.js project with create-next-app, the placeholder is briefly seen along with the regular image loaded in front, but the blurry placeholder is soon removed as everything finishes loading.

When I did repro in v3 with your image the blurry placeholder was soon removed as everything finished loading in Nextra too... curious why this didn't happen for you, could you try it in v3?

I'm not too familiar with Nextra's codebase, so I am not aware of how Nextra implemented the blur, or if they used <Image> with the prop placeholder="blur" at all.

Nextra just automatically import your images and add placeholder="blur" for you https://github.com/shuding/nextra/blob/91210abfa5053f5f9794e61ec7b53feb1cbf42a4/packages/nextra/src/server/remark-plugins/remark-static-image.ts#L79-L83

[benceruleanlu]

Not too sure how to build v3.

[dimaMachina]

check blog post https://the-guild.dev/blog/nextra-3

[dimaMachina]

below is repro in v2, is you have the same behaviour?

https://github.com/user-attachments/assets/19d9f919-16f4-44c4-a286-77782421bece

[benceruleanlu]

This is what I see. Using Chrome 126.0.6478.182. Refreshed without cache.

import Image from 'next/image'
import testingImage from '../public/commonCharacteristicsOfGiftedLearners.png'

![testing image](/commonCharacteristicsOfGiftedLearners.png)

<Image src="/commonCharacteristicsOfGiftedLearners.png" alt="Diagram of common characteristics of gifted learners" width={816} height={403} style={{ margin: '1em auto' }} />

<Image src={testingImage} alt="Diagram of common characteristics of gifted learners" width={816} height={403} style={{ margin: '1em auto' }} placeholder="blur" />

https://github.com/user-attachments/assets/b2f588e8-2935-4f29-8f05-4c662f2f31c3

[benceruleanlu]

I think this might just be a bad configuration on my system/project.

If it works at all then there shouldn't be an issue with the default setup.

[dimaMachina]

could you share your repo? so I could take a look

[benceruleanlu]

could you share your repo? so I could take a look

Sure, this is the GitHub repo.

You have to manually re-add the image in markdown to maybe replicate the issue.