plotly / plotly/dash

Add loading attribute to html.Img component

Open
#2,423 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Is your feature request related to a problem? Please describe.
I'm trying to lazy load images using the in built browser functionality, but I can't because that's not exposed in the html.Img component.

Describe the solution you'd like
I'd like the loading attribute to be added to the html.Img built in component, so I can use

html.Img(src=..., loading="lazy")

Describe alternatives you've considered
I tried using dangerously set html from the dcc markdown component and the dash-dangerously-set-html library. The former didn't work (I'm assuming something todo with the async nature of the markdown loading process). The later works, but this component doesn't support serialisation like other dash components and broke some caching (standard Flask-Caching stuff) required for my particular usecase.

Additional context
Discussed briefly on the plotly forum https://community.plotly.com/t/html-img-browser-based-lazy-loading/72637/3

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 html.Img component definition and its existing attribute handling; the issue names no file or test. Confirm that a loading value is accepted by html.Img and rendered on the resulting image element, then add or update the relevant component test to verify the attribute.

Written by the indexing model from the issue text.

Assessment

Tech stack
python, react
Domain
frontend, web-dev
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.