Display customized images

{
  "type": "asset",
  "name": "Image",
  "value": [
    {
      "name": "iStock-1140334771.jpg",
      "description": null,
      "type": "image/jpeg",
      "size": 4858659,
      "url": "https://assets-us-01.kc-usercontent.com/40886722-9bde-00cb-08d7-36b32d4a6d7b/9858cb0a-46de-4d5e-8970-42222e35463d/iStock-1140334771.jpg",
      "width": 3863,
      "height": 2578,
      "renditions": {
        "default": {
          "rendition_id": "7618a0e0-ce51-4748-b404-e0b828861c69",
          "preset_id": "a6d98cd5-8b2c-4e50-99c9-15192bce2490",
          "width": 1600,
          "height": 1200,
          "query": "w=1600&h=1200&fit=clip&rect=1539,0,1600,1200"
        }
      }
    }
  ]
}

// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import { createDeliveryClient } from '@kontent-ai/delivery-sdk';

// Specifies which asset rendition to use by default by providing defaultRenditionPreset
const deliveryClient = createDeliveryClient({
  environmentId: 'KONTENT_AI_ENVIRONMENT_ID',
  // Automatically applies the 'default' asset rendition if assets specify it
  defaultRenditionPreset: 'default',
});

// Requests a content item
const response = await deliveryClient.item('my_article').toPromise();

// Gets the first asset in the 'teaser_image' asset element
const asset = response.data.item.elements.teaser_image.value[0];

// Gets the asset's URL. If the asset specifies a rendition, it's automatically applied.
const assetUrl = asset.url;