1 line
6.6 KiB
JSON
1 line
6.6 KiB
JSON
|
{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/img"},"props":{"ratio":{"type":["String","Number"],"desc":"Force the component to maintain an aspect ratio","examples":["1","'1.7778'","# :ratio=\"4/3\"","# :ratio=\"16/9\"","# (Number format) :ratio=\"16/9\"","# (String format) ratio=\"1\""],"category":"style"},"src":{"type":"String","desc":"Path to image","transformAssetUrls":true,"examples":["# (public folder) src=\"img/something.png\"","# (assets folder) src=\"~assets/my-img.gif\"","# (relative path format) :src=\"require('./my_img.jpg')\"","# (URL) src=\"https://picsum.photos/500/300\""],"category":"model"},"srcset":{"type":"String","desc":"Same syntax as <img> srcset attribute","link":"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes","examples":["'elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w'"],"category":"model"},"sizes":{"type":"String","desc":"Same syntax as <img> sizes attribute","link":"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes","examples":["'(max-width: 320px) 280px, (max-width: 480px) 440px, 800px'"],"category":"model"},"placeholder-src":{"type":"String","desc":"While waiting for your image to load, you can use a placeholder image","transformAssetUrls":true,"examples":["# (public folder) placeholder-src=\"img/some-placeholder.png\"","# (assets folder) placeholder-src=\"~assets/my-placeholder.gif\"","# (relative path format) :placeholder-src=\"require('./placeholder.jpg')\"","# (URL) placeholder-src=\"https://picsum.photos/500/300\""],"category":"model"},"error-src":{"type":"String","desc":"In case your image fails to load, you can use an error image","transformAssetUrls":true,"examples":["# (public folder) error-src=\"img/some-placeholder.png\"","# (assets folder) error-src=\"~assets/my-placeholder.gif\"","# (relative path format) :error-src=\"require('./placeholder.jpg')\"","# (URL) error-src=\"https://picsum.photos/500/300\""],"category":"model","addedIn":"v2.15"},"initial-ratio":{"type":["String","Number"],"desc":"Use it when not specifying 'ratio' but still wanting an initial aspect ratio","default":"1.7778","examples":["# (Number format) :initial-ratio=\"16/9\"","# (String format) initial-ratio=\"1\""],"category":"style","required":false},"width":{"type":"String","desc":"Forces image width; Must also include the unit (px or %)","examples":["'280px'","'70%'"],"category":"style"},"height":{"type":"String","desc":"Forces image height; Must also include the unit (px or %)","examples":["'280px'","'70%'"],"category":"style"},"loading":{"type":"String","desc":"Lazy or immediate load; Same syntax as <img> loading attribute","default":"'lazy'","values":["'lazy'","'eager'"],"category":"behavior","required":false},"loading-show-delay":{"type":["Number","String"],"desc":"Delay showing the spinner when image changes; Gives time for the browser to load the image from cache to prevent flashing the spinner unnecessarily; Value should represent milliseconds","default":"0","examples":["500","'700'"],"category":"behavior","addedIn":"v2.14.6","required":false},"crossorigin":{"type":"String","desc":"Same syntax as <img> crossorigin attribute","values":["'anonymous'","'use-credentials'"],"category":"behavior"},"decoding":{"type":"String","desc":"Same syntax as <img> decoding attribute","values":["'sync'","'async'","'auto'"],"category":"behavior"},"referrerpolicy":{"type":"String","desc":"Same syntax as <img> referrerpolicy attribute","values":["'no-referrer'","'no-referrer-when-downgrade'","'origin'","'origin-when-cross-origin'","'same-origin'","'strict-origin'","'strict-origin-when-cross-origin'","'unsafe-url'"],"category":"behavior"},"fetchpriority":{"type":"String","desc":"Provides a hint of the relative priority to use when fetching the image","default":"'auto'","values":["'high'","'low'","'auto'"],"category":"behavior","addedIn":"v2.6.6","required":false},"fit":{"type":"String","desc":"How the image will fit into the
|