mds-img

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 JavaScirpt framework you are using.

Properties

| 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 |

Events

| Event | Description | Type | | ------------------- | ------------------------------------------- | -------------------------------- | | mdsImgLoadError | Emits when the image is not loaded | CustomEvent<MdsImgEventDetail> | | mdsImgLoadSuccess | Emits when the image is successfully loaded | CustomEvent<MdsImgEventDetail> |

Shadow Parts

| Part | Description | | --------- | ----------- | | "media" | |

Dependencies

Used by

• mds-avatar
• mds-file-preview
• mds-push-notification

Depends on

• mds-icon
• mds-text
• mds-button

Graph

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