# Image

Image accepting string source or object

# Most common usage scenario

<template>
  <SfImage
    :src="src"
    :alt="alt"
    :width="width"
    :height="height"
    :lazy="lazy"
    :picture-breakpoint="pictureBreakpoint"
    :rootMargin="rootMargin"
    :threshold="threshold"
  />
</template>
<script>
import { SfImage } from "@storefront-ui/vue";
export default {
  components: {
    SfImage,
  },
  data() {
    return {
      src: {
        mobile: { url: "/assets/storybook/SfImage/product-109x164.jpg" },
        desktop: { url: "/assets/storybook/SfImage/product-216x326.jpg" },
      },
      alt: "Vila stripe maxi shirt dress",
      width: 216,
      height: 326,
      lazy: true,
      pictureBreakpoint: 576,
      rootMargin: "",
      threshold: 0,
    };
  },
};
</script>

# Props

  • src

    • type: string|object
    • defaultValue: ""
  • lazy

    • type: boolean
    • defaultValue: true
  • width

    • type: string|number
    • defaultValue: null
  • height

    • type: string|number
    • defaultValue: null
  • pictureBreakpoint

    • type: number
    • defaultValue: 1024
  • rootMargin

    • type: string
    • defaultValue: "0px 0px 0px 0px"
  • threshold

    • type: string|number
    • defaultValue: 0

# Slots

  • default

# Events

None.

# CSS modifiers

  • .sf-image--has-size

# CSS custom properties (variables)

  • --image-width
  • --image-height
  • --_image-width
  • --_image-height
  • --image-ovarlay-padding
  • --image-ovarlay-background
  • --image-overlay-color
  • --image-overlay-opacity
  • --image-overlay-font
  • --image-overlay-font-weight
  • --image-overlay-font-size
  • --image-overlay-font-line-height
  • --image-overlay-font-family

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.