JSS: Image [DAM, Multi 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 and render each selected Bynder asset as a plain img element.

DamMultiImage.tsx

import React from 'react';
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { getAssetAlt, getFile, getMultipleAssets } from '@/lib/bynder-xm-xp-headless';
 
type DamMultiImageProps = {
  fields: {
    images?: Field<string>;
  };
};
 
const DamMultiImage = ({ fields }: DamMultiImageProps) => {
  const assets = getMultipleAssets(fields.images);
 
  if (!assets.length) {
    return null;
  }
 
  return (
    <div className="dam-image-grid">
      {assets.map((asset) => {
        const image = getFile(asset);
 
        if (!image?.url) {
          return null;
        }
 
        return (
          <img
            key={asset.id || image.url}
            src={image.url}
            width={image.width}
            height={image.height}
            alt={getAssetAlt(asset)}
          />
        );
      })}
    </div>
  );
};
 
export default withDatasourceCheck()<DamMultiImageProps>(DamMultiImage);

Single Image Single File Image