Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image: Add srcset attribute #13683

Closed
drilko opened this issue Sep 16, 2023 · 4 comments · Fixed by #13691
Closed

Image: Add srcset attribute #13683

drilko opened this issue Sep 16, 2023 · 4 comments · Fixed by #13691
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@drilko
Copy link

drilko commented Sep 16, 2023

Describe the feature you would like to see added

On the documentation site it says:" Image is used as the native img element and supports all properties that the native element has.", but it is missing srcset attribute.
It would be beneficial to support it as well.

Is your feature request related to a problem?

Nope

Describe the solution you'd like

Add srcset and perhaps previewImageSrcset inputs to the component.

Describe alternatives you have considered

I could probably "hack it" in some way by using *ngIf or media queries but it would be better to support srcset attribute as you already use native img element.

Additional context

No response

@drilko drilko added Status: Discussion Issue or pull request needs to be discussed by Core Team Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Type: New Feature Issue contains a new feature or new component request labels Sep 16, 2023
@tomer953
Copy link
Contributor

Just a quick note, if we support srcset attribute we should also support sizes

Note: If the srcset attribute uses width descriptors, the sizes attribute must also be present, or the srcset itself will be ignored.

@tomer953
Copy link
Contributor

The implementation however should not be too complex:


@Input() srcset: string | undefined;
@Input() sizes: string | undefined;

<img [attr.src]="src" [attr.srcset]="srcset" [attr.sizes]="sizes" … />

@SoyDiego
Copy link
Contributor

SoyDiego commented Sep 17, 2023

Hi guys, I have a PR.
I will send it tomorrow :)

@SoyDiego
Copy link
Contributor

PR submitted here #13691.

Thanks!

@cetincakiroglu cetincakiroglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Type: New Feature Issue contains a new feature or new component request Status: Discussion Issue or pull request needs to be discussed by Core Team Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Sep 26, 2023
@cetincakiroglu cetincakiroglu added this to the 16.4.0 milestone Sep 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants