quasar

{ "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/img" }, "mixins": [ "composables/private.use-ratio/use-ratio" ], "props": { "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" }, "ratio": { "desc": "Force the component to maintain an aspect ratio", "examples": [ "# (Number format) :ratio=\"16/9\"", "# (String format) ratio=\"1\"" ] }, "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" }, "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" }, "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" }, "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" }, "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" }, "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" }, "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": { "extends": "color", "desc": "Color name for default Spinner (unless using a 'loading' slot)", "category": "style" }, "spinner-size": { "extends": "size", "desc": "Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)", "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)" } } } } }