nuxt / nuxt/image

Cloudinary: Placeholder prop doesn't work as expected

Open
#1,215 0 comments 6 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

Issue

The default (IPX) provider works as expected for NuxtImg the component, but there are several issues with placeholders when using cloudinary as the provider.

  1. The default (without any params) placeholder prop shown in the docs should respect the original image ratio, but does not, always requesting a 10x10 image.
<!-- Automatically generate a placeholder based on the original image -->
<nuxt-img src="/nuxt.png" placeholder />

Request URL: https://res.cloudinary.com/[...]w_10,h_10[...]/cld-sample-4.jpg

  1. Adding the placeholder prop to a NuxtPicture component does not work at all. No placeholder is being requested in the network tab. Edit: This is a general issue and unrelated to the Cloudinary provider. See #1160
Repro for both issues

https://stackblitz.com/edit/github-g1qxse?file=app.vue

FYI: Once the bug has been confirmed by a maintainer, I'll try to submit a PR.

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 StackBlitz reproduction in app.vue and compare the network requests for NuxtImg and NuxtPicture using Cloudinary with the default IPX provider. Check the placeholder documentation and issue #1160 while tracing both reported behaviors. Done means the Cloudinary placeholder respects the original image ratio and the NuxtPicture behavior is resolved or clearly separated as covered by #1160.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
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.