Too many Requests on single image

[professorhaseeb]

I'm using IPX with firebase storage using "@nuxt/image": "^1.0.0-rc.1",

it's making multiple requests for a single image and exhausting bandwidth.

Previously using "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65", which was working fine.

[professorhaseeb]

this issue still exists on @nuxt/image@rc using IPX

[dosstx]

I noticed my images are downloading twice.

[Arxi]

The image is downloaded for me twice as well. The issue also seems to be intermittent - i.e. it happens most of the time, but not always. These are my npm packages:

@nuxt/content@2.13.2
@nuxt/image@1.8.0
@nuxtjs/tailwindcss@6.12.1
@tabler/icons-vue@3.16.0
nuxt-bus@0.9.3
nuxt-easy-lightbox@1.0.2
nuxt-gtag@3.0.1
nuxt@3.13.1
vue-router@4.4.4
vue@3.5.4

This is what I have in my nuxt config:

  image: {
    provider: "ipx",  // the default
  },

I have this simple page in pages/test.vue (this is the whole page):

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
            placeholder="/x-600.png"
    />
</template>

What I see in developer console in Network tab is this:

Two separate requests are sent. One image is 37kB, but 78.7kB of image data was transferred (that includes favicon and the placeholder image which is cancelled and then downloaded anyway).

If I remove the placeholder line:

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
    />
</template>

the image is correctly loaded just once:

If I use the placeholder like this:

<template>
    <NuxtImg src="/images/1-front-matter.webp"
            sizes="500px"
            :placeholder="[50, 50]"
    />
</template>

my image is again downloaded twice, with one cancellation:

This happens in nuxt dev, also when I use nuxt generate and preview the site, and also deployed in production.

I tried to replicate it in CodeSandbox, unfortunately I don't see any images loaded in the developer tools in Preview pane, so I'm not sure what's happening there.

But when I open the official playground on StackBlitz, let it load and then reload just the Preview pane with the reload button, I see mountains_1.jpg being downloaded twice as well (the first one is the small placeholder):

[baijii]

I have the same issue. Maybe this is helpful in solving it.

With placeholder and with sizes:

1. Placeholder loaded
2. Final image loaded
3. Placeholder loaded again but canceled
4. Final image loaded again

<NuxtImg
  src="/img/passenger_example.jpg"
  sizes="100vw md:450px"
  :placeholder="[450, 350, 15, 20]"
  format="webp"
  width="450"
  height="350"
/>

With placeholder and without sizes:

1. Placeholder loaded
2. Some other placeholder (probably for the other size) is loaded
3. Final image loaded

<NuxtImg src="/img/passenger_example.jpg" :placeholder="[450, 350, 15, 20]" format="webp" width="450" height="350" />

<img width="1617" alt="Screenshot 2024-10-02 at 14 33 38" src="https://github.com/user-attachments/assets/5875b83a-b063-459f-a740-0680abbb3898">

**Without placeholder and with sizes:**
1. Final image loaded
```html

<NuxtImg
  src="/img/passenger_example.jpg"
  sizes="100vw md:450px"
  format="webp"
  width="450"
  height="350"
/>

Sadly, the root for that problem is the placeholder. For now, my workaround would be to not use placeholders.