[{"_path":"/api/dollarimg","_draft":false,"_partial":false,"_empty":false,"title":"$img utility","description":"Using $img utility to generate provider specific URLs.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it's required to directly use a generated image URL with applied transformations instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" components."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"code","props":{"code":"$img(src, modifiers, options)\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$img(src, modifiers, options)\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Generate image URL for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"text","value":" style."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  computed: {\n    backgroundStyles() {\n      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n      return {\n        backgroundImage: `url('${imgUrl}')`\n      }\n    }\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  computed: {\n    backgroundStyles() {\n      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n      return {\n        backgroundImage: `url('${imgUrl}')`\n      }\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"imggetsizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img.getSizes"}]}]},{"type":"element","tag":"code","props":{"code":"$img.getSizes(src, { sizes, modifiers });\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"$img.getSizes(src, { sizes, modifiers });\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unstable: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getSizes"}]},{"type":"text","value":" API might change or be removed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Parameters:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": (string) Source to original image id"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":": (string) List of responsive image sizes ({breakpoint}:{size}{unit})"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": (object) Modifiers passed to provider for resizing and optimizing"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":": resize to the specified width (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":": resize to specified height (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":": Change image quality (0 to 100)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": Change the image format"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"(any other custom provider modifier)"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": (object)"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]},{"type":"text","value":": (string) Provider name other than default (see "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/api/options#providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]},{"type":"text","value":": Use a "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"preset"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Responsive srcset with Vuetify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <v-img\n    :lazy-src=\"$img(src, { width: 10, quality: 70 })\"\n    :src=\"$img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  ></v-img>\n</template>\n<script>\n  export default {\n    props: {\n      height: { type: [Number, String], default: 500 },\n      src: {\n        type: String,\n        default: '/img/header-bg.jpg',\n      },\n    },\n    computed: {\n      _srcset() {\n        return this.$img.getSizes(this.src, {\n          sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n          modifiers: {\n            format: 'webp',\n            quality: 70,\n            height: 500,\n          },\n        });\n      },\n    },\n  };\n</script>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <v-img\n    :lazy-src=\"$img(src, { width: 10, quality: 70 })\"\n    :src=\"$img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  ></v-img>\n</template>\n<script>\n  export default {\n    props: {\n      height: { type: [Number, String], default: 500 },\n      src: {\n        type: String,\n        default: '/img/header-bg.jpg',\n      },\n    },\n    computed: {\n      _srcset() {\n        return this.$img.getSizes(this.src, {\n          sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n          modifiers: {\n            format: 'webp',\n            quality: 70,\n            height: 500,\n          },\n        });\n      },\n    },\n  };\n</script>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes it's required to directly use a generated image URL with applied transformations instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" components."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"code","props":{"code":"$img(src, modifiers, options)\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Generate image URL for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"text","value":" style."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  computed: {\n    backgroundStyles() {\n      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })\n      return {\n        backgroundImage: `url('${imgUrl}')`\n      }\n    }\n  }\n}\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"backgroundStyles"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"imgUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d2cd6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'https://github.com/nuxt.png'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"backgroundImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"`url('"}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"imgUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"')`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"imggetsizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img.getSizes"}]}]},{"type":"element","tag":"code","props":{"code":"$img.getSizes(src, { sizes, modifiers });\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"getSizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" });"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unstable: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getSizes"}]},{"type":"text","value":" API might change or be removed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Parameters:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":": (string) Source to original image id"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":": (string) List of responsive image sizes ({breakpoint}:{size}{unit})"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":": (object) Modifiers passed to provider for resizing and optimizing"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":": resize to the specified width (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":": resize to specified height (in pixels)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":": Change image quality (0 to 100)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":": Change the image format"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"(any other custom provider modifier)"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":": (object)"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]},{"type":"text","value":": (string) Provider name other than default (see "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/api/options#providers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]},{"type":"text","value":": Use a "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"preset"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Responsive srcset with Vuetify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <v-img\n    :lazy-src=\"$img(src, { width: 10, quality: 70 })\"\n    :src=\"$img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  ></v-img>\n</template>\n<script>\n  export default {\n    props: {\n      height: { type: [Number, String], default: 500 },\n      src: {\n        type: String,\n        default: '/img/header-bg.jpg',\n      },\n    },\n    computed: {\n      _srcset() {\n        return this.$img.getSizes(this.src, {\n          sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n          modifiers: {\n            format: 'webp',\n            quality: 70,\n            height: 500,\n          },\n        });\n      },\n    },\n  };\n</script>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"v-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":lazy-src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"$img(src, { width: 10, quality: 70 })\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"$img(src, { height, quality: 70 })\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":srcset"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"_srcset.srcset\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"height\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":":sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"\"_srcset.sizes\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  ></"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"v-img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'/img/header-bg.jpg'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"_srcset"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-26ef91"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"$img"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fdc5c3"},"children":[{"type":"text","value":"getSizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fa90f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-62ce00"},"children":[{"type":"text","value":"'webp'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"70"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4615bd"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"          },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"        });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-1e5d94"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-fc6d59"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4615bd{color:#D19A66}.ct-62ce00{color:#98C379}.ct-8d2cd6{color:#56B6C2}.ct-fa90f1{color:#E5C07B}.ct-26ef91{color:#C678DD}.ct-1e5d94{color:#E06C75}.ct-fc6d59{color:#ABB2BF}.ct-fdc5c3{color:#61AFEF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"imggetsizes","depth":3,"text":"$img.getSizes"}]}]}},"_type":"markdown","_id":"content:3.api:2.$img.md","_source":"content","_file":"3.api/2.$img.md","_extension":"md"},{"_path":"/providers/cloudimage","_draft":false,"_partial":false,"_empty":false,"title":"Cloudimage","description":"Nuxt Image has first class integration with Cloudimage","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/home","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the token of your project in cloudimage."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo'\n   }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo'\n   }\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Current integration uses API "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v7"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override default options:"}]},{"type":"element","tag":"h3","props":{"id":"token"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"token"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]},{"type":"text","value":" (required)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your Cloudimage customer token. "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/register_page","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"register"}]},{"type":"text","value":" for a Cloudimage account to get one. The subscription takes less than a minute and is totally free."}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your uploads base URL. This alows to shorten your origin image URLs."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo',\n      baseURL: 'sample.li'  // optional\n   }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo',\n      baseURL: 'sample.li'  // optional\n   }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"cdnurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cdnURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://{token}.cloudimg.io/v7"}]}]}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-modifiers"},"children":[{"type":"text","value":"Cloudimage modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", also you can pass Cloudimage-specific "},{"type":"element","tag":"a","props":{"href":"https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage-specific transformation"}]},{"type":"text","value":" params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-fit-values"},"children":[{"type":"text","value":"Cloudimage "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudimage offers the following for extra resizing params:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" - Crops the image to specified dimensions (width and height) and keeps proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" - Crops the image automatically keeping the most prominent face."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" - Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropfit"}]},{"type":"text","value":" - Sets crop or fit resize mode depending on the origin and the desired dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bound"}]},{"type":"text","value":" - Resizes to a given width and height box and keeps proportions. Similar to fit but without adding padding."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"boundmin"}]},{"type":"text","value":" - Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/home","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the token of your project in cloudimage."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo'\n   }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"cloudimage"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'demo'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"   }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" Current integration uses API "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v7"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override default options:"}]},{"type":"element","tag":"h3","props":{"id":"token"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"token"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]},{"type":"text","value":" (required)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"demo"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your Cloudimage customer token. "},{"type":"element","tag":"a","props":{"href":"https://www.cloudimage.io/en/register_page","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"register"}]},{"type":"text","value":" for a Cloudimage account to get one. The subscription takes less than a minute and is totally free."}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your uploads base URL. This alows to shorten your origin image URLs."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudimage: {\n      token: 'demo',\n      baseURL: 'sample.li'  // optional\n   }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0a026d"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"cloudimage"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'demo'"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1a372d"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-7e43ff"},"children":[{"type":"text","value":"'sample.li'"}]},{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0a9a76"},"children":[{"type":"text","value":"// optional"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"   }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e9484"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"cdnurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cdnURL"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"https://{token}.cloudimg.io/v7"}]}]}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-modifiers"},"children":[{"type":"text","value":"Cloudimage modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#modifiers"},"children":[{"type":"text","value":"standard modifiers"}]},{"type":"text","value":", also you can pass Cloudimage-specific "},{"type":"element","tag":"a","props":{"href":"https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/introduction","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudimage-specific transformation"}]},{"type":"text","value":" params to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop."}]},{"type":"element","tag":"h2","props":{"id":"cloudimage-fit-values"},"children":[{"type":"text","value":"Cloudimage "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" values"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Beside "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture, Cloudimage offers the following for extra resizing params:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" - Crops the image to specified dimensions (width and height) and keeps proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"face"}]},{"type":"text","value":" - Crops the image automatically keeping the most prominent face."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" - Resizes the image to fit into a specified width and height box, adds padding (image or solid colour) to keep proportions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cropfit"}]},{"type":"text","value":" - Sets crop or fit resize mode depending on the origin and the desired dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bound"}]},{"type":"text","value":" - Resizes to a given width and height box and keeps proportions. Similar to fit but without adding padding."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"boundmin"}]},{"type":"text","value":" - Resizes an image while bounding the smaller dimension to the desired width or height while keeping proportions."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-0a9a76{color:#7F848E}.ct-7e43ff{color:#98C379}.ct-1a372d{color:#E06C75}.ct-9e9484{color:#ABB2BF}.ct-0a026d{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options","depth":2,"text":"Options","children":[{"id":"token","depth":3,"text":"token"},{"id":"baseurl","depth":3,"text":"baseURL"},{"id":"cdnurl","depth":3,"text":"cdnURL"}]},{"id":"cloudimage-modifiers","depth":2,"text":"Cloudimage modifiers"},{"id":"cloudimage-fit-values","depth":2,"text":"Cloudimage fit values"}]}},"_type":"markdown","_id":"content:4.providers:cloudimage.md","_source":"content","_file":"4.providers/cloudimage.md","_extension":"md"}]