nuxt / nuxt/image

Generated build images not respecting format

Open
#1,058 2 comments 4 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

Hello,

Running Nuxt in dev mode respects the format option, e.g webp, but generated builds do not.

The mimetype for dev mode is image/webp but for generated builds it is image/png (when using a PNG as the source image, for example).

Reproduction: https://stackblitz.com/edit/github-u9k8hh?file=app.vue (the reproduction is a fork of https://image.nuxt.com/playground). I have also added a native <img> element using the useImage() composable. The issue is the same regardless whether using <NuxtImg> or <img>.

Run yarn dev to see correctly formatted image.
Run yarn build && yarn generate && yarn preview to see incorrectly formatted image.

You can inspect the image via Chrome Dev Tools > Network to see the mimetype.

I am aware there may be issues upstream with IPX.

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 reproduction in app.vue, then run yarn dev and yarn build && yarn generate && yarn preview. Compare the generated image's MIME type with the dev result in Chrome DevTools Network. Done means generated builds respect the configured format, including when using NuxtImg and the useImage() composable.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.