next/future/image blur placeholder does not fill parent div

[tiotdev]

Verify canary release

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

Provide environment information

Binaries:
  Node: 14.17.3
  npm: 8.19.1
  Yarn: 1.22.4
  pnpm: N/A
Relevant packages:
  next: 12.3.1-canary.3
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The blur placeholder in next/future/image with fill=true is shown at the original image dimensions instead of filling the parent div (as the image does when loaded)

Expected Behavior

Same behaviour as next/image, that the placeholder fills the parent div

Above: next/image Below: next/future/image

Link to reproduction

https://github.com/tiotdev/next-future-image-blur-fill-bug

To Reproduce

import Image from "next/image";
import FutureImage from "next/future/image";

export default function Home() {
  return (
    <>
      <div
        style={{
          width: "100%",
          height: "200px",
          backgroundColor: "red",
          position: "relative",
        }}
      >
        <Image
          src="https://img.travelfeed.io/jpphotography%2F20200609T140211386Z-reisen-127.jpg"
          alt=""
          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR4nGMINGf4/+3at/t7+2viGNQZGKbE69UlOSV5mgEAnuYKmizl818AAAAASUVORK5CYII="
          placeholder="blur"
          layout="fill"
          objectFit="cover"
        />
      </div>
      <div
        style={{
          width: "100%",
          height: "200px",
          backgroundColor: "red",
          position: "relative",
        }}
      >
        <FutureImage
          src="https://img.travelfeed.io/jpphotography%2F20200609T140211386Z-reisen-127.jpg"
          alt=""
          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAI0lEQVR4nGMINGf4/+3at/t7+2viGNQZGKbE69UlOSV5mgEAnuYKmizl818AAAAASUVORK5CYII="
          placeholder="blur"
          fill
          sizes="100vw"
          style={{ objectFit: "cover" }}
        />
      </div>
    </>
  );
}

[rubytree33]

I've been trying to solve this issue and for some reason I can't find how you paused the page in that state for the screenshot, which would make this a lot easier. What kind of breakpoint did you set up?

[tiotdev]

In Chrome dev tools in the sources tab there's a pause button, I just click that manually for simple debugging

[mcgrealife]

Nice comparison @tiotdev! I am experiencing the same issue.

[mcgrealife]

Note: I am still experiencing this in next@13, using the now renamed next/image component

The blurDataURL image is not respecting the object-fit: cover style (on either the next/image style or className props). Rather the blurred image appears as if it were 'object-fit: contain '.

The actual image that the blurDataURL is replaced with does respect the object-fit style properly though.

[topaxi]

I think this has something to do with the SVG that is wrapping the blurDataURL. When I disable JavaScript and I switch the background-url out with my generated base64 low quality and blurred image, it places itself perfectly.

[topaxi]

There is now a PR that should fix this 🥳

See: https://github.com/vercel/next.js/pull/44317

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.