Svelte > Managing images

    Managing images

    One of the major advantages of using DatoCMS instead of any other content management systems is its responsiveImage query, which will return pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

    To make it even easier to offer responsive, progressive, lazy-loaded images on your projects, we released a package called @datocms/svelte that exposes an <Image /> component and pairs perfectly with the responsiveImage query:

    To take advantage of it, install the @datocms/svelte package:

    yarn add @datocms/svelte

    Then, inside your component or SvelteKit page, feed content coming from a responsiveImage query directly into the <Image /> component:

    <script>
    import { onMount } from 'svelte';
    import { Image } from '@datocms/svelte';
    const query = `query {
    blogPost {
    title
    cover {
    responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
    srcSet
    webpSrcSet
    sizes
    src
    width
    height
    aspectRatio
    alt
    title
    base64
    }
    }
    }
    }`;
    let data = null;
    onMount(async () => {
    const response = await fetch('https://graphql.datocms.com/', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    Authorization: "Bearer YOUR_API_TOKEN",
    },
    body: JSON.stringify({ query })
    })
    const json = await response.json()
    data = json.data;
    });
    </script>
    {#if data}
    <Image data={data.blogPost.cover.responsiveImage} />
    {/if}