{
"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 ![]()
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 ![]()
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 ![]()
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 ![]()
crossorigin attribute",
"values": ["'anonymous'", "'use-credentials'"],
"category": "behavior"
},
"decoding": {
"type": "String",
"desc": "Same syntax as ![]()
decoding attribute",
"values": ["'sync'", "'async'", "'auto'"],
"category": "behavior"
},
"referrerpolicy": {
"type": "String",
"desc": "Same syntax as ![]()
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)"
}
}
}
}
}