This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
alt |
alt |
Specifies an alternate text for an image | string |
'' |
crossorigin |
crossorigin |
Allow images from third-party sites that allow cross-origin access to be used with canvas | "anonymous" | "use-credentials" | undefined |
'use-credentials' |
height |
height |
The height attribute specifies the height of an image, in pixels. | string | undefined |
undefined |
loading |
loading |
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met. | "eager" | "lazy" | undefined |
'lazy' |
referrerpolicy |
referrerpolicy |
Specifies which referrer information to use when fetching an image. | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "unsafe-url" | undefined |
'no-referrer-when-downgrade' |
sizes |
sizes |
One or more strings separated by commas, indicating a set of source sizes. https://medium.com/@MRWwebDesign/responsive-images-the-sizes-attribute-and-unexpected-image-sizes-882a2eadb6db | string | undefined |
undefined |
src |
src |
Specifies the path to the image | string |
undefined |
srcset |
srcset |
Specifies a list of image files to use in different situations. Defines multiple sizes of the same image, allowing the browser to select the appropriate image source. | string | undefined |
undefined |
srcsetConsumption |
srcset-consumption |
Specifies a list of image files to use in different situations. Defines multiple sizes of the same image, allowing the browser to select the appropriate image source based on consumption configuration. <mds-img srcset-consumption="image-black-n-white-1x.jpg low, image-1x.jpg medium, image-2x.jpg high"></mds-img>
|
string | undefined |
undefined |
width |
width |
The width attribute specifies the width of an image, in pixels. | string | undefined |
undefined |
Event | Description | Type |
---|---|---|
mdsImgLoadError |
Emits when the image is not loaded | CustomEvent<MdsImgEventDetail> |
mdsImgLoadSuccess |
Emits when the image is successfully loaded | CustomEvent<MdsImgEventDetail> |
Type: Promise<void>
Part | Description |
---|---|
"media" |
graph TD;
mds-img --> mds-icon
mds-img --> mds-text
mds-img --> mds-button
mds-button --> mds-spinner
mds-button --> mds-icon
mds-button --> mds-text
mds-avatar --> mds-img
mds-file-preview --> mds-img
mds-push-notification --> mds-img
style mds-img fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department