docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Passing custom props to IdealImage

Open CommonGuy opened this issue 1 year ago • 2 comments

Have you read the Contributing Guidelines on issues?

Prerequisites

  • [X] I'm using the latest version of Docusaurus.
  • [X] I have tried the npm run clear or yarn clear command.
  • [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • [X] I have tried creating a repro with https://new.docusaurus.io.
  • [X] I have read the console error message carefully (if applicable).

Description

I want to pass custom properties (namely fetchpriority=high to improve Largest Contentful Paint) to the Image of ideal-image, but this gets ignored.

The property is rendered in dev (with ideal-image config disableInDev: true), but not in the build.

Reproducible demo

No response

Steps to reproduce

  1. Create <Image img={require('../screenshot.png')} alt="My screenshot" fetchpriority="high" />
  2. View output: fetchpriority isn't rendered

Expected behavior

The custom attributes should be rendered

Actual behavior

They aren't being rendered

Your environment

No response

Self-service

  • [ ] I'd be willing to fix this bug myself.

CommonGuy avatar Mar 08 '24 09:03 CommonGuy

Yes, ideal images are simple <img> tags in dev (to be faster) and resized images in prod, using this historical dependency (a fork of a fork 😅): https://github.com/slorber/docusaurus-react-ideal-image

That dependency probably does not let props pass through. I plan to internalize all this legacy code someday because currently, it's a bit hard to deal with it.

slorber avatar Mar 08 '24 10:03 slorber

Yeah I noticed the "funny dependency graph" :) Also makes it hard to create a PR to fix this myself

CommonGuy avatar Mar 08 '24 12:03 CommonGuy