JSS: Image [DAM, Single asset]

This is an example implementation. Adapt the component, helper usage, styling, fallback behavior, and rendering logic to fit your own JSS application.

Parse the XML-wrapped JSON field value, read the first selected asset, and render its first file as a plain img element.

DamSingleImage.tsx

import React from 'react';
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { getAssetAlt, getFile, getSingleAsset } from '@/lib/bynder-xm-xp-headless';
 
type DamSingleImageProps = {
  fields: {
    image?: Field<string>;
  };
};
 
const DamSingleImage = ({ fields }: DamSingleImageProps) => {
  const asset = getSingleAsset(fields.image);
  const image = getFile(asset);
 
  if (!image?.url) {
    return null;
  }
 
  return <img src={image.url} width={image.width} height={image.height} alt={getAssetAlt(asset)} />;
};
 
export default withDatasourceCheck()<DamSingleImageProps>(DamSingleImage);

Overview Multi Image