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
- Select the image and copy its url
Now you can use it directly to fetch thatimage
.
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.