nuxt / nuxt/image

Format modifier cannot be unset

Open
#2,001 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

IPX does not have the svg format modifier, this means that if you add in your nuxt config

image: {
  ipx: {
    modifiers: {
      format: 'webp',
    }
  }
}

And then for some svg images you want to override the format to avoid it being converted into an inferior format, none of those solutions will work

<NuxtImage src="my.svg" format="svg">
<!-- Results in ipx f_svg, but ipx doesn't support svg output (even though the original is already svg) -->
<NuxtImage src="my.svg" :format="null">
<!-- Results in ipx f_webp -->
<NuxtImage src="my.svg" :modifiers="{format: null}">
<!-- Results in ipx f_webp -->

Using format auto will also not result in a svg output

So we need a way to either discard the default modifiers or a format "original" in ipx

Added a fix for the first case in https://github.com/unjs/ipx/pull/281

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 at the NuxtImage format and modifiers props and the image.ipx.modifiers configuration, then trace how null, svg, and auto are translated for IPX. Review the referenced unjs/ipx pull request #281; done should mean an SVG can override the configured webp modifier without producing unsupported f_svg output.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.