Kerumen
Repos
135
Followers
68
Following
25

A complete and cross-platform card.io component for React Native (iOS and Android).

455
118

Animated counter component for React Native

30
27

The React Framework

100053
21649

A framework for building native applications using React

107370
21847

Set up a modern web app by running one command.

98706
24762

Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles:

93062
23832

Events

Created at 2 hours ago
started
Created at 3 days ago
started
Created at 2 weeks ago
Created at 1 month ago
Created at 1 month ago
Created at 2 months ago
Created at 2 months ago
opened issue
Image blur placeholder not taking full width with fill image

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.12.1
  Yarn: 1.22.19
  pnpm: 7.14.2
Relevant packages:
  next: 13.0.2
  eslint-config-next: 13.0.2
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 107.0.5304.87

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using the Image component (Next.js v13) with fill and a blurDataURL, the blurred placeholder is not taking the full width of the viewport as the loaded image does.

I stumbled across this PR which fixed some bugs related to the blur placeholder. It seems that adding preserveAspectRatio="none" to the generated SVG without width / height would fix the issue but I don't know the implications. Also, why is it an SVG and not just the base64 image as it was on Next.js v12?

Expected Behavior

The blurred SVG should take the full width of the viewport and not display empty spaces around the image. It was working correctly on Next.js v12.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://codesandbox.io/s/goofy-orla-v8kciw

To Reproduce

Use an Image component with fill and a blurDataURL.

Created at 2 months ago
Created at 2 months ago