Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using next/image with priority property and cloudinary loader config, adds space on top of every image on mobile.

See original GitHub issue

Bug report

Describe the bug

It renders an additional space on top of every image on mobile when using next/image with priority property and cloudinary loader config.

To Reproduce

CodeSandbox

Configure loader in next.config.js as written below.
Render Image using next/image with priority property above the fold and another image without priority property, below the fold.
On mobile, images will have extra space on top of it. https://22f17.sse.codesandbox.io/

// next.config.js
module.exports = {
  images: {
    domains: ["assets.wego.com"],
    loader: "cloudinary",
    path: "https://assets.wego.com/image/upload/"
  }
};

import Image from "next/image";

export default function IndexPage() {
  return (
    <div>
      <div>
        <Image
          width="100"
          height="40"
          src="/v1/makalu/wego.png"
          alt="logo"
          priority
        />
      </div>

      <div style={{ paddingTop: "800px" }}></div>

      <div>
        This image has empty space on top of it.
        <Image
          width="100"
          height="40"
          src="/v1/makalu/wego.png"
          alt="logo"
        />
      </div>
    </div>
  );
}

Expected behavior

Images should not have an extra space on top of it.

Screenshots

System information

OS: macOS
Browser chrome mobile, chrome device toolbar
Version of Next.js: ~10.0.3~ 12.0.1
Version of Node.js: ~12.4.0~ 16

Issue Analytics

State:
Created 3 years ago
Comments:13 (1 by maintainers)

Top GitHub Comments

1reaction

balazsorban44commented, Feb 9, 2022

@sapjax Seems to be correct. Using the original reproduction and blocking the script makes the issue go away.

With blocking:

Without blocking:

Adding a data-cfstyle prop to the Image also seem to help:

https://codesandbox.io/s/nextjs-image-priority-issue-forked-rsudw?file=/pages/index.js:414-437

https://rsudw.sse.codesandbox.io/

I’m not sure Next.js can do anything about this specifically. You could add a Content-Security-Policy to your website to disallow running that script.

It might also be configurable to disable this in Cloudflare:

https://help.dreamhost.com/hc/en-us/articles/216477897-Cloudflare-technologies-available-in-the-panel#:~:text=Mirage is only available for,check box.

1reaction

sapjaxcommented, Feb 4, 2022

I found this issue is that Cloudflare injected a script into HTML, https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js and this script remove the style of img tags, if we add data-cfstyle attribute on img, it will not remove style and merge style then, so we can found on the rendered html img tags, the style is 3333;position:absolute..... 🤣

Top Results From Across the Web

Next.js automatic image optimization with next/image

Learn about automatic image optimization and how it can benefit developers with the native, game-changing, and powerful next/image API.

Nextjs image optimization with examples - Refine Dev

Built-in image optimization using next image component. ... The Image Component Properties; Optional next/image Props; Configuration Options ...

Deliver images with the Next.js Image component (video tutorial)

Watch a video tutorial to learn how to deliver Cloudinary images using the Next.js Image component.

next/image - Next.js

Enable Image Optimization with the built-in Image component. ... you can use the loaderFile configuration in next.config.js to configure every instance of ...

How to Use Cloudinary Images in Next.js with Blurred ...

Step 0: Creating a new Next.js app; Step 1: Adding a new local image with Next.js Image; Step 2: Using static Cloudinary image...