Settings
AddonsCard design schemaElement typesImage

Image

Displays an image.

Interface

interface IImage extends IElement {
  url: string;
  person?: boolean;
  title?: string | ILocales;
  alt?: string | ILocales;
  isDecorative?: boolean;
  styles?: {
    container: React.CSSProperties | Interpolation;
    image: React.CSSProperties | Interpolation;
  };
  livePersonaCard?: {
    email: string;
    loginName: string;
    displayName: string;
    type?: "User" | "Group";
  };
  fallbackImageUrl?: string;
  size?: number;
  resolution?: number;
  fileExtension?: string;
}

Example

Image
{
  "type": "Image",
  "url": "@eval({base.urls.previewUrl} || {base.image.preview})",
  "alt": "{base.image.alt}",
  "isDecorative": "{base.image.isDecorative}",
  "fallbackImageUrl": "https://spoprod-a.akamaihd.net/default.jpg",
  "resolution": 1,
  "style": {
    "margin": "0px",
    "border-radius": "5px 5px 0px 0px",
    "width": "100%",
    "height": "150px",
    "objectFit": "cover"
  }
}
Image using livePersonaCard
{
  "type": "Image",
  "url": "{base.author.picture}",
  "person": true,
  "size": 2,
  "style": {
    "width": "40px",
    "marginLeft": "15px"
  },
  "livePersonaCard": {
    "displayName": "{base.author.name}",
    "email": "{base.author.email}",
    "loginName": "{base.author.loginName}"
  }
}

Properties

type

Must be “Image”.

  • Type: "Image"

  • Required: Yes

url

The URL of the image

  • Type: string

  • Required: Yes

person

If true, apply person styles to the image

  • Type: boolean

  • Required: No

alt

Provides alternative information for an image if a user for some reason cannot view it.

isDecorative

If true, the image is purely decorative and will be hidden from assistive technologies.

  • Type: boolean

  • Required: No

title

Specifies extra information about an element.

styles

Allow to apply styles in image or image container.

  • Type: object
interface styles {
  container: React.CSSProperties | Interpolation;
  image: React.CSSProperties | Interpolation;
}
  • Required: No

livePersonaCard

Allows you to preview information about the person by hovering or clicking

  • Type: object
interface livePersonaCard {
  email: string;
  loginName: string;
  displayName: string;
  type?: "User" | "Group";
}
  • Required: No

fallbackImageUrl

Url of the image to be displayed if the url property of the image has not been reported or does not exist

  • Type: string

  • Required: No

size

Specifies the size at which the image of the person will be displayed. Possible values ​​are from 0 to 18

  • Type: number[0-18]

  • Required: No

resolution

Specifies the resolution of the image.

  • Type: number[0-6]
enum resolution {
  0 = "300px",
  1 = "480px",
  2 = "750px",
  3 = "1024px",
  4 = "1600px",
  5 = "2560px",
  6 = "original",
}
  • Required: No

fileExtension

Specify the file extension(".pdf",".doc",".ppt",...) if you want the extension image to be displayed when the image url failed

  • Type: string

  • Required: No

IconNumber