JSS: Image [DAM, Single file]

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 and render the selected derivative as a plain img element.

DamSingleFileImage.tsx

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

Multi Image Video