{"_path":"/components/nuxt-img","_draft":false,"_partial":false,"_empty":false,"title":"<nuxt-img>","description":"Discover how to use and configure the nuxt-img component.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uses built-in provider to optimize local and remote images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Converts "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" to provider optimized URLs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatically resizes images based on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generates responsive sizes when providing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" option"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supports native lazy loading as well as other "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" attributes"}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" outputs a native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" tag directly (without any wrapper around it). Use it like you would use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt-icon.png\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt-icon.png\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/nuxt-icon.png\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<img src=\"/nuxt-icon.png\" />\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"default provider"}]},{"type":"text","value":", you should put "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt-icon.png"}]},{"type":"text","value":" inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory to make the above example work."}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"h3","props":{"id":"src"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Path to image file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" should be in the form of an absolute path for static images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory.\nOtherwise path that is expected by provider that starts with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" or a URL."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt.png\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt.png\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For image optimization when using external urls in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":", we need to whitelist them using "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"placeholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"placeholder"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display a placeholder image before the actual image is fully loaded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case."}]},{"type":"element","tag":"code","props":{"code":"<!-- Automatically generate a placeholder based on the original image -->\n<nuxt-img src=\"/nuxt.png\" placeholder />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<!-- Automatically generate a placeholder based on the original image -->\n<nuxt-img src=\"/nuxt.png\" placeholder />\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Set a width, height & quality for the automatically generated placeholder  -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"[100, 50, 10]\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<!-- Set a width, height & quality for the automatically generated placeholder  -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"[100, 50, 10]\" />\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Set the width & height of the automatically generated placeholder -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"15\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<!-- Set the width & height of the automatically generated placeholder -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"15\" />\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Provide your own image -->\n<nuxt-img src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<!-- Provide your own image -->\n<nuxt-img src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Follow the roadmap for the placeholder prop "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues/189","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h3","props":{"id":"width--height"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" / "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify width/height of the image."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use desired width/height for static sized images like icons or avatars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use original image width/height for responsive images (when using "},{"type":"element","tag":"a","props":{"href":"#sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"h3","props":{"id":"sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify responsive sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This a space-separated list of screen size/width pairs. You can "},{"type":"element","tag":"a","props":{"href":"/api/options#screens"},"children":[{"type":"text","value":"see a list of the defined screen sizes here"}]},{"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 src=\"/logos/nuxt.png\" sizes=\"sm:100vw md:50vw lg:400px\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/logos/nuxt.png\" sizes=\"sm:100vw md:50vw lg:400px\" />\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use other provider instead of default "},{"type":"element","tag":"a","props":{"href":"/api/options#provider"},"children":[{"type":"text","value":"provider option"}]},{"type":"text","value":" specified in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img\n    provider=\"cloudinary\"\n    src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n    width=\"300\"\n    height=\"169\"\n  />\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\n    provider=\"cloudinary\"\n    src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n    width=\"300\"\n    height=\"169\"\n  />\n</template>\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudinary: {\n      baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\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    cloudinary: {\n      baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\n    },\n  },\n};\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preset"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can define presets using "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"presets option"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img preset=\"cover\" 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=\"cover\" src=\"/nuxt-icon.png\" />\n</template>\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    presets: {\n      cover: {\n        modifiers: {\n          fit: \"cover\",\n          format: \"jpg\",\n          width: 300,\n          height: 300,\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      cover: {\n        modifiers: {\n          fit: \"cover\",\n          format: \"jpg\",\n          width: 300,\n          height: 300,\n        },\n      },\n    },\n  },\n};\n"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to serve images in a specific format, use this prop."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img format=\"webp\" src=\"/nuxt-icon.png\" ... />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img format=\"webp\" src=\"/nuxt-icon.png\" ... />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Available formats are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":". If the format is not specified, it will respect the default image format."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The quality for the generated image(s)."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt.jpg\" quality=\"80\" width=\"200\" height=\"100\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt.jpg\" quality=\"80\" width=\"200\" height=\"100\" />\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property specifies the size of the images.\nThere are five standard values you can use with this property."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": Ignore the aspect ratio of the input and stretch to both provided dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified."}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img fit=\"cover\" src=\"/nuxt-icon.png\" width=\"200\" height=\"100\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img fit=\"cover\" src=\"/nuxt-icon.png\" width=\"200\" height=\"100\" />\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some providers support other values"}]}]},{"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":"In addition to the standard modifiers, each provider might have its own additional modifiers. Because these modifiers depend on the provider, refer to its documentation to know what can be used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop lets you use any of these transformations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"cloudinary\"\n  src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n  width=\"300\"\n  height=\"169\"\n  :modifiers=\"{ roundCorner: '0:100' }\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img\n  provider=\"cloudinary\"\n  src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n  width=\"300\"\n  height=\"169\"\n  :modifiers=\"{ roundCorner: '0:100' }\"\n/>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"preload"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preload"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to preload the image, use this prop. This will place a corresponding "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"link"}]},{"type":"text","value":" tag in the page's head."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img preload src=\"/nuxt-icon.png\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img preload src=\"/nuxt-icon.png\" />\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"loading"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"native"}]},{"type":"text","value":" attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is "},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/loading-lazy-attr","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supported"}]},{"type":"text","value":" by the latest version of all major browsers since March 2022."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading=\"lazy\""}]},{"type":"text","value":" to defer loading of an image until it appears in the viewport."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt-icon.png\" loading=\"lazy\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt-icon.png\" loading=\"lazy\" />\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Native events emitted by the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" element contained by "},{"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 are re-emitted and can be listened to."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Listen to the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLoad"}]},{"type":"text","value":" event from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" is a drop-in replacement for the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uses built-in provider to optimize local and remote images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Converts "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" to provider optimized URLs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Automatically resizes images based on "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generates responsive sizes when providing "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":" option"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supports native lazy loading as well as other "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" attributes"}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" outputs a native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"img"}]},{"type":"text","value":" tag directly (without any wrapper around it). Use it like you would use the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" tag:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt-icon.png\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Will result in:"}]},{"type":"element","tag":"code","props":{"code":"<img src=\"/nuxt-icon.png\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"a","props":{"href":"/getting-started/providers#default-provider"},"children":[{"type":"text","value":"default provider"}]},{"type":"text","value":", you should put "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/nuxt-icon.png"}]},{"type":"text","value":" inside "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory to make the above example work."}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"h3","props":{"id":"src"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Path to image file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" should be in the form of an absolute path for static images in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory.\nOtherwise path that is expected by provider that starts with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/"}]},{"type":"text","value":" or a URL."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt.png\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For image optimization when using external urls in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":", we need to whitelist them using "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"placeholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"placeholder"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display a placeholder image before the actual image is fully loaded."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case."}]},{"type":"element","tag":"code","props":{"code":"<!-- Automatically generate a placeholder based on the original image -->\n<nuxt-img src=\"/nuxt.png\" placeholder />\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-7b99cb"},"children":[{"type":"text","value":"<!-- Automatically generate a placeholder based on the original image -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Set a width, height & quality for the automatically generated placeholder  -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"[100, 50, 10]\" />\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-7b99cb"},"children":[{"type":"text","value":"<!-- Set a width, height & quality for the automatically generated placeholder  -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"[100, 50, 10]\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Set the width & height of the automatically generated placeholder -->\n<nuxt-img src=\"/nuxt.png\" :placeholder=\"15\" />\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-7b99cb"},"children":[{"type":"text","value":"<!-- Set the width & height of the automatically generated placeholder -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"15\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"<!-- Provide your own image -->\n<nuxt-img src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\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-7b99cb"},"children":[{"type":"text","value":"<!-- Provide your own image -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"placeholder"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"./placeholder.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Follow the roadmap for the placeholder prop "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/image/issues/189","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"h3","props":{"id":"width--height"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" / "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify width/height of the image."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use desired width/height for static sized images like icons or avatars"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use original image width/height for responsive images (when using "},{"type":"element","tag":"a","props":{"href":"#sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"h3","props":{"id":"sizes"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specify responsive sizes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This a space-separated list of screen size/width pairs. You can "},{"type":"element","tag":"a","props":{"href":"/api/options#screens"},"children":[{"type":"text","value":"see a list of the defined screen sizes here"}]},{"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 src=\"/logos/nuxt.png\" sizes=\"sm:100vw md:50vw lg:400px\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/logos/nuxt.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"sm:100vw md:50vw lg:400px\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"provider"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use other provider instead of default "},{"type":"element","tag":"a","props":{"href":"/api/options#provider"},"children":[{"type":"text","value":"provider option"}]},{"type":"text","value":" specified in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img\n    provider=\"cloudinary\"\n    src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n    width=\"300\"\n    height=\"169\"\n  />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"169\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    cloudinary: {\n      baseURL: \"https://res.cloudinary.com/nuxt/image/upload/\",\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-cdcb4b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdcb4b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"cloudinary"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"https://res.cloudinary.com/nuxt/image/upload/\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preset"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects."}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can define presets using "},{"type":"element","tag":"a","props":{"href":"/api/options#presets"},"children":[{"type":"text","value":"presets option"}]},{"type":"text","value":" in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config"}]}]}]},{"type":"element","tag":"code-group","props":{},"children":[{"type":"element","tag":"code","props":{"code":"<template>\n  <nuxt-img preset=\"cover\" 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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"preset"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    presets: {\n      cover: {\n        modifiers: {\n          fit: \"cover\",\n          format: \"jpg\",\n          width: 300,\n          height: 300,\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-cdcb4b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdcb4b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"presets"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"cover"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"jpg\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"};"}]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to serve images in a specific format, use this prop."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img format=\"webp\" src=\"/nuxt-icon.png\" ... />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"webp\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Available formats are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpg"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"gif"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":". If the format is not specified, it will respect the default image format."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The quality for the generated image(s)."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt.jpg\" quality=\"80\" width=\"200\" height=\"100\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt.jpg\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"80\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"200\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"100\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property specifies the size of the images.\nThere are five standard values you can use with this property."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":": Ignore the aspect ratio of the input and stretch to both provided dimensions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":": Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified."}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img fit=\"cover\" src=\"/nuxt-icon.png\" width=\"200\" height=\"100\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cover\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"200\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"100\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some providers support other values"}]}]},{"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":"In addition to the standard modifiers, each provider might have its own additional modifiers. Because these modifiers depend on the provider, refer to its documentation to know what can be used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop lets you use any of these transformations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  provider=\"cloudinary\"\n  src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n  width=\"300\"\n  height=\"169\"\n  :modifiers=\"{ roundCorner: '0:100' }\"\n/>\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"cloudinary\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/remote/nuxt-org/blog/going-full-static/main.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"300\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"169\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"{ roundCorner: '0:100' }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"preload"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"preload"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In case you want to preload the image, use this prop. This will place a corresponding "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"link"}]},{"type":"text","value":" tag in the page's head."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img preload src=\"/nuxt-icon.png\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"preload"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"loading"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"native"}]},{"type":"text","value":" attribute that provides a hint\nto the browser on how to handle the loading of an image which is outside the viewport.\nIt is "},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/loading-lazy-attr","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"supported"}]},{"type":"text","value":" by the latest version of all major browsers since March 2022."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"loading=\"lazy\""}]},{"type":"text","value":" to defer loading of an image until it appears in the viewport."}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img src=\"/nuxt-icon.png\" loading=\"lazy\" />\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/nuxt-icon.png\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"loading"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"lazy\""}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Native events emitted by the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<img>"}]},{"type":"text","value":" element contained by "},{"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 are re-emitted and can be listened to."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"text","value":" Listen to the native "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"onLoad"}]},{"type":"text","value":" event from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\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-58809a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4641a2"},"children":[{"type":"text","value":"nuxt-img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"/images/colors.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-ad1d49"},"children":[{"type":"text","value":"@load"}]},{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3af93b"},"children":[{"type":"text","value":"\"doSomethingOnLoad\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58809a"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cdcb4b{color:#C678DD}.ct-7b99cb{color:#7F848E}.ct-3af93b{color:#98C379}.ct-ad1d49{color:#D19A66}.ct-4641a2{color:#E06C75}.ct-58809a{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"props","depth":2,"text":"Props","children":[{"id":"src","depth":3,"text":"src"},{"id":"placeholder","depth":3,"text":"placeholder"},{"id":"width--height","depth":3,"text":"width / height"},{"id":"sizes","depth":3,"text":"sizes"},{"id":"provider","depth":3,"text":"provider"},{"id":"preset","depth":3,"text":"preset"},{"id":"format","depth":3,"text":"format"},{"id":"quality","depth":3,"text":"quality"},{"id":"fit","depth":3,"text":"fit"},{"id":"modifiers","depth":3,"text":"modifiers"},{"id":"preload","depth":3,"text":"preload"},{"id":"loading","depth":3,"text":"loading"}]},{"id":"events","depth":2,"text":"Events"}]}},"_type":"markdown","_id":"content:2.components:1.nuxt-img.md","_source":"content","_file":"2.components/1.nuxt-img.md","_extension":"md"}