quasar/dist/api/QImg.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"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 container; Equivalent of the object-fit prop; Can be coordinated with 'position' prop","default":"'cover'","values":["'cover'","'fill'","'contain'","'none'","'scale-down'"],"category":"style","required":false},"position":{"type":"String","desc":"The alignment of the image into the container; Equivalent of the object-position CSS prop","default":"'50% 50%'","examples":["'0 0'","'20px 50px'"],"category":"style","required":false},"alt":{"type":"String","desc":"Specifies an alternate text for the image, if the image cannot be displayed","examples":["'Two cats'"],"category":"miscellaneous"},"draggable":{"type":"Boolean","desc":"Adds the native 'draggable' attribute","category":"miscellaneous"},"img-class":{"type":"String","desc":"CSS classes to be attributed to the native img element","examples":["'my-special-class'"],"category":"style"},"img-style":{"type":"Object","tsType":"VueStyleObjectProp","desc":"Apply CSS to the native img element","examples":["{ transform: 'rotate(45deg)' }"],"category":"style"},"spinner-color":{"type":"String","tsType":"NamedColor","desc":"Color name for default Spinner (unless using a 'loading' slot)","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"spinner-size":{"type":"String","desc":"Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)","examples":["'16px'","'2rem'"],"category":"style"},"no-spinner":{"type":"Boolean","desc":"Do not display the default spinner while waiting for the image to be loaded; It is overriden by the 'loading' slot when one is present","category":"behavior"},"no-native-menu":{"type":"Boolean","desc":"Disables the native context menu for the image","category":"behavior"},"no-transition":{"type":"Boolean","desc":"Disable default transition when switching between old and new image","category":"behavior"}},"slots":{"default":{"desc":"Default slot can be used for captions. See examples"},"loading":{"desc":"While image is loading, this slot is being displayed on top of the component; Suggestions: a spinner or text"},"error":{"desc":"Optional slot to be used when image could not be loaded; make sure you assign a min-height and min-width to the component through CSS"}},"events":{"load":{"desc":"Emitted when image has been loaded by the browser","params":{"src":{"type":"String","desc":"URL of image that has been loaded; useful when using 'srcset' and/or 'sizes'","examples":["'https://some-site.net/some-img.gif'"]}}},"error":{"desc":"Emitted when browser could not load the image","params":{"evt":{"type":"Event","desc":"JS Event object (same as the browser's native 'error' event)"}}}}}