Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

Scrivito.ImageTag

Renders an editable CMS content image.

<Scrivito.ImageTag content={this.props.widget} attribute="source" alt="" />

Renders an img tag with the src URL of the referenced CMS image object.

Props

  • attribute (String) – the name of the reference or binary attribute for the image. Default: blob
  • content (Binary, Obj, Widget) – the image resource itself, or a page or widget holding a reference or binary attribute for the image.

Remarks

  • Other props are rendered as attributes of the resulting img tag.
  • If the type of the attribute is reference, the image reference can be changed by editors.
Examples
<Scrivito.ImageTag content={myImageObj} />
<Scrivito.ImageTag content={myPageObj} attribute="headerImage" />
<Scrivito.ImageTag content={myWidget} attribute="image" />
<Scrivito.ImageTag content={widget} attribute="image" className="img-responsive" title={widget.get("imageTitle")} alt={widget.get("imageAlt")} />

Using browser-level lazy-loading:

<Scrivito.ImageTag content={widget} attribute="image" loading="lazy" width={widget.get("image").metadata().get("width")} height={widget.get("image").metadata().get("height")} />