import { createDeliveryClient } from '@oracle/content-management-sdk';
//setup ocm server options
const serverconfig = {
contentServer: SERVER_URL,
contentVersion: API_VERSION,
channelToken: CHANNEL_TOKEN,
};
//initiate OCM Client SDK
const clientInstance = createDeliveryClient(serverconfig);
/**
* displayOCMImages
* loop through all img elements that have data-ocm attribute and replace transparent 1px b64 gif src with image url from OCM
*/
function displayOCMImages() {
const img_els = document.querySelector('img[data-ocm]');
//loop
img_els.forEach((el) => {
//get id from att val
const id = el.getAttribute('data-ocm');
//generate asset url
const imgURL = clientInstance.getRenditionURL({
id: id,
type: 'Thumbnail',
format: 'jpg'
});
//update
el.src = imgURL;
});
}
//init
displayOCMImages();
<img data-ocm="CONT12345678" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />