WebReinvent Internal Docs
Api

Image API

You can use Builder's Image API to access optimized versions of images that you've uploaded.

Overview

Image API requests take the following format: https://cdn.builder.io/api/v1/image/assets&<filename>?<params>

  • <filename> is the name of your image file, typically auto-generated by Builder at upload time.
  • <params> are settings that determine the image's height, width, and so on.


To get the URL follow below steps

  • Go to asset library Go to asset library
  • Select the image and copy its url Select URL
    Now you can use it directly to fetch that image.

NOTE: You can also specify params in the url like width,quality etc.
https://cdn.builder.io/api/v1/image/assets%<filename>?width=800&height=500&quality=1

if you want to know about all available params Click here

Using the Image API with CMS Data models


You can fetch Images which you have uploaded in your models by using the content API.

import {fetchEntries} from '@builder.io/sdk-vue';
const entry = await fetchEntries({
  model: 'data-model-name',
  apiKey: config.public.apiKey,
   options: {
     fields: 'data.image'
     //if you have a field named image in a model
   },
})
  • You will get the Image Url in the response.

Copyright © 2024