Skip to content

JImage: never swallow an attribute the caller needs #762

Description

@romain-pm

Part of #734. A developer must never be pushed off the component because it swallowed an attribute.

<JImage> hand-lists what it omits from ImgHTMLAttributes and drops height for good. Jahia/jahia.com's card icons take their box from the width/height HTML attributes and have no CSS rule at all, so they could not use the component and fell back to getImageProps plus a manual re-apply.

  • Derive the omit from the component's own props (Omit<ImgHTMLAttributes<HTMLImageElement>, keyof JImageProps>) instead of a hand-written list, so a prop added later cannot silently eat an attribute. Next.js composes both its components this way.
  • Re-declare height rather than removing it — next/image omits width/height and then adds them back with its own type.
  • Rename the slot width so it does not collide with the HTML attribute (slotWidth), or add intrinsic={false}.
  • An open attributes map, spread onto the <img>, accepting either a record or a function of the resolved image (({ src, width, height }) => Record<string, string>). Static values are already expressible; the function form is what an analytics attribute derived from the final src needs.
  • Decide priority vs preload before release. Next.js 16 renamed priority to preload and deprecated the old name.

Metadata

Metadata

Assignees

No one assigned

    Labels

    featA new feature

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions