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

feat(nuxt-img): responsive prop #155

Merged
merged 4 commits into from
Jan 25, 2021
Merged

feat(nuxt-img): responsive prop #155

merged 4 commits into from
Jan 25, 2021

Conversation

pi0
Copy link
Member

@pi0 pi0 commented Jan 22, 2021

Support <nuxt-img responsive> to auto generate srcSet sources and sizes based on default values in order to load smaller images in responsive breakpoints. This implementation is based on new $img.getSizes utility.

Alternatives:

  • Using <nuxt-picture>
    • It works but has overhead of wrapper div (for placeholder) and
    • Less closer to native img tag for usage
  • Using <nuxt-img :srcSet="$img.sizes">
    • Need SSR ctx workaround when `loading=lazy" is enabled for static build
    • More complex code when we need native like img tag and responsive sources
    • More complex usage (= less encouraging to use)
    • Need to also compute sizes for breakpoints

Closes #113

@Atinux Atinux self-requested a review January 23, 2021 10:30
@pi0 pi0 marked this pull request as ready for review January 25, 2021 09:37
@pi0 pi0 merged commit 3dcee93 into dev Jan 25, 2021
@pi0 pi0 deleted the feat/image-responsive branch January 25, 2021 14:42
procrates pushed a commit to procrates/nuxt-image that referenced this pull request Feb 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Handle retina display
2 participants