[{"_path":"/api/options","_draft":false,"_partial":false,"_empty":false,"title":"Module Options","description":"Nuxt Image is configured with sensible defaults.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To configure the image module and customize its behavior, you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" property in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // Options\n  }\n}\n","filename":"nuxt.config","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    // Options\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"screens"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screens"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List of predefined screen sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These sizes will be used to generate resized and optimized versions of an image (for example, with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" modifier)."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // The screen sizes predefined by `@nuxt/image`:\n    screens: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280,\n      xxl: 1536,\n      '2xl': 1536\n    },\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    // The screen sizes predefined by `@nuxt/image`:\n    screens: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280,\n      xxl: 1536,\n      '2xl': 1536\n    },\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: ['nuxtjs.org']\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    domains: ['nuxtjs.org']\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"presets"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"presets"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    presets: {\n      avatar: {\n        modifiers: {\n          format: 'jpg',\n          width: 50,\n          height: 50\n        }\n      }\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    presets: {\n      avatar: {\n        modifiers: {\n          format: 'jpg',\n          width: 50,\n          height: 50\n        }\n      }\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img preset=\"avatar\" src=\"/nuxt-icon.png\" />\n</template>\n","filename":"index.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <nuxt-img preset=\"avatar\" src=\"/nuxt-icon.png\" />\n</template>\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"providers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to create and use a "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"custom provider"}]},{"type":"text","value":", you need to use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":" option and define your custom providers."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    providers: {\n      random: {\n        provider: '~/providers/random',\n        options: {}\n      }\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    providers: {\n      random: {\n        provider: '~/providers/random',\n        options: {}\n      }\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img provider=\"random\" src=\"main.png\" width=\"300\" height=\"169\" />\n</template>\n","filename":"index.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <nuxt-img provider=\"random\" src=\"main.png\" width=\"300\" height=\"169\" />\n</template>\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can specify default provider to be used when not specified in component or when calling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    provider: 'twicpics',\n    twicpics: {\n      baseURL: 'https://nuxt-demo.twic.pics'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    provider: 'twicpics',\n    twicpics: {\n      baseURL: 'https://nuxt-demo.twic.pics'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default modifiers for the selected provider."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    provider: 'cloudinary',\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',\n      modifiers: {\n        effect: 'sharpen:100',\n        quality: 'auto:best',\n      }\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    provider: 'cloudinary',\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',\n      modifiers: {\n        effect: 'sharpen:100',\n        quality: 'auto:best',\n      }\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"staticfilename"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"staticFilename"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use this option to change filename and location for the static image generation."}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"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":"[name]"}]},{"type":"text","value":": Only filename, without extension or path"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[hash]"}]},{"type":"text","value":": The hash of url"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[ext]"}]},{"type":"text","value":": Extension with leading dot "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".png"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[publicPath]"}]},{"type":"text","value":": Default is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"build.publicPath"}]},{"type":"text","value":" ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_nuxt"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n      // Generate images to `/_nuxt/image/file.png`\n      staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n      // Generate images to `/_nuxt/image/file.png`\n      staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"dir"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify the location of the source images when using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example you might want the source images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/images"}]},{"type":"text","value":" directory rather than the default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" directory so the source images don't get copied into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" and deployed:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    dir: 'assets/images'\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    dir: 'assets/images'\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Notes:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" causes 404 errors."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider, make sure to deploy customized "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For some providers (like vercel), using a directory other than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory (deployment URL)"}]}]},{"type":"element","tag":"h2","props":{"id":"alias"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify aliases for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the default ipx provider, URL aliases are shortened on the server-side.\nThis is especially useful for optimizing external URLs and not including them in HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: [\n      'images.unsplash.com'\n    ],\n    alias: {\n      unsplash: 'https://images.unsplash.com'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    domains: [\n      'images.unsplash.com'\n    ],\n    alias: {\n      unsplash: 'https://images.unsplash.com'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"https://images.unsplash.com/<id>\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"https://images.unsplash.com/<id>\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/_ipx/https://images.unsplash.com/<id>\">\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<img src=\"/_ipx/https://images.unsplash.com/<id>\">\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/unsplash/<id>\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/unsplash/<id>\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/_ipx/unsplash/<id>\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<img src=\"/_ipx/unsplash/<id>\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both usage and output are simplified!"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To configure the image module and customize its behavior, you can use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"image"}]},{"type":"text","value":" property in your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]},{"type":"text","value":":"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // Options\n  }\n}\n","filename":"nuxt.config","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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// Options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"screens"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"screens"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List of predefined screen sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These sizes will be used to generate resized and optimized versions of an image (for example, with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" modifier)."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    // The screen sizes predefined by `@nuxt/image`:\n    screens: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280,\n      xxl: 1536,\n      '2xl': 1536\n    },\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// The screen sizes predefined by `@nuxt/image`:"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"screens"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"320"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"640"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"md"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"768"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1024"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1280"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"xxl"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1536"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'2xl'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"1536"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enable image optimization on an external website, specify which domains are allowed to be optimized. This option will be used to detect whether a remote image should be optimized or not. This is needed to ensure that external urls can't be abused."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: ['nuxtjs.org']\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'nuxtjs.org'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"presets"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"presets"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are collections of pre-defined configurations for your projects. Presets will help you to unify images all over your project."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    presets: {\n      avatar: {\n        modifiers: {\n          format: 'jpg',\n          width: 50,\n          height: 50\n        }\n      }\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"presets"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"avatar"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'jpg'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"50"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"50"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img preset=\"avatar\" src=\"/nuxt-icon.png\" />\n</template>\n","filename":"index.vue","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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"preset"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"avatar\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"providers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to create and use a "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"custom provider"}]},{"type":"text","value":", you need to use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"providers"}]},{"type":"text","value":" option and define your custom providers."}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    providers: {\n      random: {\n        provider: '~/providers/random',\n        options: {}\n      }\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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"providers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"random"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'~/providers/random'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img provider=\"random\" src=\"main.png\" width=\"300\" height=\"169\" />\n</template>\n","filename":"index.vue","language":"vue"},"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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"random\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"main.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"300\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"169\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can specify default provider to be used when not specified in component or when calling "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$img"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    provider: 'twicpics',\n    twicpics: {\n      baseURL: 'https://nuxt-demo.twic.pics'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'twicpics'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"twicpics"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://nuxt-demo.twic.pics'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"modifiers"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default modifiers for the selected provider."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    provider: 'cloudinary',\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',\n      modifiers: {\n        effect: 'sharpen:100',\n        quality: 'auto:best',\n      }\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'cloudinary'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://res.cloudinary.com/<company>/image/fetch/'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"effect"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'sharpen:100'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'auto:best'"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"staticfilename"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"staticFilename"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use this option to change filename and location for the static image generation."}]},{"type":"element","tag":"h3","props":{"id":"parameters"},"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":"[name]"}]},{"type":"text","value":": Only filename, without extension or path"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[hash]"}]},{"type":"text","value":": The hash of url"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[ext]"}]},{"type":"text","value":": Extension with leading dot "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".png"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"[publicPath]"}]},{"type":"text","value":": Default is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"build.publicPath"}]},{"type":"text","value":" ("},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/_nuxt"}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n      // Generate images to `/_nuxt/image/file.png`\n      staticFilename: '[publicPath]/images/[name]-[hash][ext]'\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-424f07"},"children":[{"type":"text","value":"// Generate images to `/_nuxt/image/file.png`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"staticFilename"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'[publicPath]/images/[name]-[hash][ext]'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"dir"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify the location of the source images when using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example you might want the source images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/images"}]},{"type":"text","value":" directory rather than the default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" directory so the source images don't get copied into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" and deployed:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    dir: 'assets/images'\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"dir"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'assets/images'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Notes:"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" causes 404 errors."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" provider, make sure to deploy customized "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dir"}]},{"type":"text","value":" as well."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For some providers (like vercel), using a directory other than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" for assets is not supported since resizing happens at runtime (instead of build/generate time) and source fetched from the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory (deployment URL)"}]}]},{"type":"element","tag":"h2","props":{"id":"alias"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"alias"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This option allows you to specify aliases for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the default ipx provider, URL aliases are shortened on the server-side.\nThis is especially useful for optimizing external URLs and not including them in HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using other providers, aliases are resolved in runtime and included in HTML. (only the usage is simplified)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    domains: [\n      'images.unsplash.com'\n    ],\n    alias: {\n      unsplash: 'https://images.unsplash.com'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"ts"},"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-411fa4"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-411fa4"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"domains"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'images.unsplash.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"unsplash"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"'https://images.unsplash.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Before"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"https://images.unsplash.com/<id>\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"https://images.unsplash.com/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/_ipx/https://images.unsplash.com/<id>\">\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/_ipx/https://images.unsplash.com/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"After"}]},{"type":"text","value":" using alias:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/unsplash/<id>\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/unsplash/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generates:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/_ipx/unsplash/<id>\" />\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-55599e"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-dee0f5"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-faec20"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"\"/_ipx/unsplash/"}]},{"type":"element","tag":"span","props":{"class":"ct-b058bd"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-86af46"},"children":[{"type":"text","value":"id>\""}]},{"type":"element","tag":"span","props":{"class":"ct-55599e"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both usage and output are simplified!"}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b058bd{color:#FFFFFF}.ct-86af46{color:#98C379}.ct-faec20{color:#D19A66}.ct-424f07{color:#7F848E}.ct-dee0f5{color:#E06C75}.ct-55599e{color:#ABB2BF}.ct-411fa4{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"screens","depth":2,"text":"screens"},{"id":"domains","depth":2,"text":"domains"},{"id":"presets","depth":2,"text":"presets"},{"id":"providers","depth":2,"text":"providers"},{"id":"provider","depth":2,"text":"provider","children":[{"id":"modifiers","depth":3,"text":"modifiers"}]},{"id":"staticfilename","depth":2,"text":"staticFilename","children":[{"id":"parameters","depth":3,"text":"Parameters"}]},{"id":"dir","depth":2,"text":"dir"},{"id":"alias","depth":2,"text":"alias"}]}},"_type":"markdown","_id":"content:3.api:1.options.md","_source":"content","_file":"3.api/1.options.md","_extension":"md"},{"_path":"/providers/cloudflare","_draft":false,"_partial":false,"_empty":false,"title":"Cloudflare","description":"Nuxt Image has first class integration with Cloudflare","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://developers.cloudflare.com/images/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudflare"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Availability only for Business and Enterprise Customers. Normally Cloudflare "},{"type":"element","tag":"a","props":{"href":"https://pages.cloudflare.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" users can already benefit from build-time image optimization."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url (zone) of your service:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    baseURL: 'https://that-test.site'\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    baseURL: 'https://that-test.site'\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"cloudflare\" src=\"/burger.jpeg\" height=\"300\" :modifiers=\"{ fit: 'contain' }\" />\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img provider=\"cloudflare\" src=\"/burger.jpeg\" height=\"300\" :modifiers=\"{ fit: 'contain' }\" />\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your deployment's domain (zone)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/cdn-cgi/image/"}]},{"type":"text","value":" will be automatically appended for generating URLs."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://developers.cloudflare.com/images/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudflare"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Availability only for Business and Enterprise Customers. Normally Cloudflare "},{"type":"element","tag":"a","props":{"href":"https://pages.cloudflare.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" users can already benefit from build-time image optimization."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the base url (zone) of your service:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    baseURL: 'https://that-test.site'\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-578029"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-578029"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-270885"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-270885"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ed412e"},"children":[{"type":"text","value":"'https://that-test.site'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a1118e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"cloudflare\" src=\"/burger.jpeg\" height=\"300\" :modifiers=\"{ fit: 'contain' }\" />\n","language":"vue"},"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-a1118e"},"children":[{"type":"text","value":"<nuxt-img provider=\"cloudflare\" src=\"/burger.jpeg\" height=\"300\" :modifiers=\"{ fit: 'contain' }\" />"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"options"},"children":[{"type":"text","value":"Options"}]},{"type":"element","tag":"h3","props":{"id":"baseurl"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your deployment's domain (zone)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/cdn-cgi/image/"}]},{"type":"text","value":" will be automatically appended for generating URLs."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ed412e{color:#98C379}.ct-270885{color:#E06C75}.ct-a1118e{color:#ABB2BF}.ct-578029{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"options","depth":2,"text":"Options","children":[{"id":"baseurl","depth":3,"text":"baseURL"}]}]}},"_type":"markdown","_id":"content:4.providers:cloudflare.md","_source":"content","_file":"4.providers/cloudflare.md","_extension":"md"}]