nuxt / nuxt/image

IPX doesn't apply to data-src

Open
#714 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Hi,

I am using nuxt-lazysizes on my project. 'lazysizes' uses data-src for original image When image is visible data-src attibute replacing to src attribute. If you put the src attribute at the same time, src attribute uses for placeholder image before replaced.

Simply like this (without nuxt-img):
<img class="lazyload" src="loading.svg" data-src="my-original-image.jpg" /> // Input
<img class="lazyloaded" src="my-original-image.jpg" /> // Ouput

When i using nuxt-img component with lazysizes (data-src) doesn't applied ipx provider to data-src. nuxt-img renders original path after loaded lazyload img (after replacing data-src to src). Ipx applies to only src attribute but that is placeholder image in this scenario.

(✔️ Not lazy, it works. Applies ipx )
<nuxt-img src="https://mycdn.com/image.jpg" format="webp" /> // Input
<img src="/_ipx/f_webp/https://mycdn.com/image.jpg" /> // Output

(❌ Lazy (data-src), doesn't work. Doesn't applies ipx after loaded lazy image. Applying only src)

Input

  • <nuxt-img class="lazyload" src="/loading.svg" data-src="https://mycdn.com/image.jpg" format="webp" />

Output, before lazyloaded

  • <img class="lazyload" src="/_ipx/f_webp/loading.svg" data-src="https://mycdn.com/image.jpg" />

Output, after lazyloaded

  • <img class="lazyloaded" src="https://mycdn.com/image.jpg" data-src="https://mycdn.com/image.jpg" />

src is not provided with ipx after lazyloaded for lazy img.

In addition, i am using ipx provider for my external cdn images.

  • "nuxt@2.15.7"
  • "@nuxt/image": "^0.6.2"
  • "nuxt-lazysizes": "^1.4.0"
  • Webpack
  • SSR

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the nuxt-img rendering path and IPX provider behavior, reproducing the supplied lazy and non-lazy examples with nuxt-lazysizes. Done means a lazy image's data-src is transformed through IPX so that, after lazy loading, the resulting src retains the expected optimized URL rather than the original CDN URL.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, webpack
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.