next/future/image with a blurred placeholder shows double images when JS is disabled

[jakejarvis]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
  Node: 18.5.0
  npm: 8.13.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.2.3-canary.5
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 103.0.5060.114, Chrome Canary 105.0.5177.0, Firefox 102.0.1

How are you deploying your application? (if relevant)

No response

Describe the Bug

There's something going on with the <noscript> behavior of next/future/image that I can't quite figure out...

The original next/image with placeholder="blur" simply falls back to a normal image tag when JavaScript has been disabled, but the future version either:

1. Shows a blurry image on the left, and the real image on the right in development, or
2. Shows two identical images in production.

Expected Behavior

One image displayed per one <Image /> component, whether or not JavaScript is enabled in the browser.

Link to reproduction

https://github.com/jakejarvis/next-future-image-bug

To Reproduce

I've tested this in both Chrome and Firefox. To reproduce this specific behavior, JavaScript must be disabled from the dev tools panel followed by a refresh.

• Chrome instructions
• Firefox instructions

The reproduction is deployed to Vercel at https://next-future-image-bug.vercel.app/. This shows the two identical images next to each other.

Or, clone the reproduction repo locally (git clone https://github.com/jakejarvis/next-future-image-bug.git and next dev) to see the case where there is one blurred image and one clear image side-by-side.

Both sections use the same statically imported JPG with placeholder="blur" being the only other prop set, i.e.:

import FutureImage from "next/future/image";
import Image from "next/image";
import pandaJpg from "../public/panda.jpg";
// ...
<FutureImage src={pandaJpg} placeholder="blur" />
<Image src={pandaJpg} placeholder="blur" />

[EduardoSCosta]

Hi, I was investigating this issue and noticed that when using the next/image component with javascript disabled, it puts the noscript image on top of the normal image using position: absolute, using a <span> as wrapper, but in the next/future/image component there is no longer a wrapper, so it renders one image next to the other. To solve this, could the <noscript> content be removed? It only renders when the placeholder is blur. I also noticed that the background of the image is already blurred, so is blurring the image too with filter: 'blur(20px)' really necessary? What do you think, @styfle ?

[github-actions]

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.