Picture element with q-img #17308
Unanswered
Divensky
asked this question in
General - Components / Directives / etc
Replies: 1 comment 1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a mobile image and a desktop image and I want to display the one that fits the window width. This is an example of what I want to achieve, based on MDN:
I searched for ways to do it and found the following:
q-img
inside the<picture>
element because the<picture>
element requires animg
tag as its direct child.q-img
props permit me to achieve a functionality exactly like that of the<picture>
element above.q-img
and calculate this path either by observing the window size directly or though$q.screen
; however, either calculation would introduce a performance overhead which I don't want.So I concluded that the way to display responsive images at alternative dynamic paths without a performance penalty would be by using native
<picture>
and<img>
elements rather thanq-img
.I'd be happy to be proven wrong in case there is a better way to leverage Quasar's features.
I could not find any docs or examples of handing this
<picture>
use case with Quasar, so would be happy to see any comments.Beta Was this translation helpful? Give feedback.
All reactions