nuxt / nuxt/image

Type errors with img html attributes when `checkUnknownProps` is enabled

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

Hello,

If I turn on the checkUnknownProps option in vueCompilerOptions, the NuxtImg component seems to error out with multiple img html attributes such as alt and loading.

I think it would be nice to either add some more html attributes to the explicitly defined props here, or make the props extend from the ImgHTMLAttributes type. The same problem happens with NuxtPicture but that seems to be a little more complex (because certain specific properties seem to be manually passed down to the img elements).

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 src/runtime/utils/props.ts, especially the explicitly defined NuxtImg props, and reproduce the type errors with vueCompilerOptions.checkUnknownProps enabled. Compare the handling of NuxtImg and NuxtPicture, including the properties passed to the underlying img elements. Done means supported attributes such as alt and loading no longer produce type errors for either component.

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
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.