[{"data":1,"prerenderedAt":3849},["Reactive",2],{"navigation":3,"docs-/usage/nuxt-img":115,"docs-/usage/nuxt-img-surround":3266},[4,20,33,105],{"title":5,"_path":6,"children":7},"Get Started","/get-started",[8,11,14,17],{"title":9,"_path":10},"Installation","/get-started/installation",{"title":12,"_path":13},"Configuration","/get-started/configuration",{"title":15,"_path":16},"Providers","/get-started/providers",{"title":18,"_path":19},"Contributing","/get-started/contributing",{"title":21,"_path":22,"children":23},"Usage","/usage",[24,27,30],{"title":25,"_path":26},"\u003CNuxtImg>","/usage/nuxt-img",{"title":28,"_path":29},"\u003CNuxtPicture>","/usage/nuxt-picture",{"title":31,"_path":32},"useImage()","/usage/use-image",{"title":15,"_path":34,"children":35},"/providers",[36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102],{"title":37,"_path":38},"Cloudflare","/providers/cloudflare",{"title":40,"_path":41},"Cloudimage","/providers/cloudimage",{"title":43,"_path":44},"Cloudinary","/providers/cloudinary",{"title":46,"_path":47},"Contentful","/providers/contentful",{"title":49,"_path":50},"Directus","/providers/directus",{"title":52,"_path":53},"Edgio","/providers/edgio",{"title":55,"_path":56},"Fastly","/providers/fastly",{"title":58,"_path":59},"Glide","/providers/glide",{"title":61,"_path":62},"Gumlet","/providers/gumlet",{"title":64,"_path":65},"ImageEngine","/providers/imageengine",{"title":67,"_path":68},"ImageKit","/providers/imagekit",{"title":70,"_path":71},"Imgix","/providers/imgix",{"title":73,"_path":74},"IPX","/providers/ipx",{"title":76,"_path":77},"Netlify","/providers/netlify",{"title":79,"_path":80},"Prepr","/providers/prepr",{"title":82,"_path":83},"Prismic","/providers/prismic",{"title":85,"_path":86},"Sanity","/providers/sanity",{"title":88,"_path":89},"Storyblok","/providers/storyblok",{"title":91,"_path":92},"Strapi","/providers/strapi",{"title":94,"_path":95},"Twicpics","/providers/twicpics",{"title":97,"_path":98},"Unsplash","/providers/unsplash",{"title":100,"_path":101},"Uploadcare","/providers/uploadcare",{"title":103,"_path":104},"Vercel","/providers/vercel",{"title":106,"_path":107,"children":108},"Advanced","/advanced",[109,112],{"title":110,"_path":111},"Custom Provider","/advanced/custom-provider",{"title":113,"_path":114},"Static Images","/advanced/static-images",{"_path":26,"_dir":116,"_draft":117,"_partial":117,"_locale":118,"title":25,"description":119,"links":120,"body":126,"_type":3262,"_id":3263,"_source":3264,"_file":3265,"_extension":605},"usage",false,"","Discover how to use and configure the Nuxt Image component.",[121],{"label":122,"icon":123,"to":124,"size":125},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-img.ts","xs",{"type":127,"children":128,"toc":3241},"root",[129,149,211,216,238,297,302,344,374,380,388,393,415,458,480,494,499,522,529,534,547,560,608,617,696,704,709,716,869,877,882,887,1215,1229,1397,1405,1423,1430,1724,1732,1737,1757,2087,2095,2100,2169,2216,2224,2229,2338,2346,2357,2409,2512,2520,2528,2533,2544,2551,2695,2703,2715,2762,2770,2794,2806,2870,2878,2904,3066,3072,3094,3114,3235],{"type":130,"tag":131,"props":132,"children":133},"element","p",{},[134,140,142,147],{"type":130,"tag":135,"props":136,"children":137},"code",{"className":118},[138],{"type":139,"value":25},"text",{"type":139,"value":141}," is a drop-in replacement for the native ",{"type":130,"tag":135,"props":143,"children":144},{"className":118},[145],{"type":139,"value":146},"\u003Cimg>",{"type":139,"value":148}," tag.",{"type":130,"tag":150,"props":151,"children":152},"ul",{},[153,159,171,188,200],{"type":130,"tag":154,"props":155,"children":156},"li",{},[157],{"type":139,"value":158},"Uses built-in provider to optimize local and remote images",{"type":130,"tag":154,"props":160,"children":161},{},[162,164,169],{"type":139,"value":163},"Converts ",{"type":130,"tag":135,"props":165,"children":166},{"className":118},[167],{"type":139,"value":168},"src",{"type":139,"value":170}," to provider optimized URLs",{"type":130,"tag":154,"props":172,"children":173},{},[174,176,181,183],{"type":139,"value":175},"Automatically resizes images based on ",{"type":130,"tag":135,"props":177,"children":178},{"className":118},[179],{"type":139,"value":180},"width",{"type":139,"value":182}," and ",{"type":130,"tag":135,"props":184,"children":185},{"className":118},[186],{"type":139,"value":187},"height",{"type":130,"tag":154,"props":189,"children":190},{},[191,193,198],{"type":139,"value":192},"Generates responsive sizes when providing ",{"type":130,"tag":135,"props":194,"children":195},{"className":118},[196],{"type":139,"value":197},"sizes",{"type":139,"value":199}," option",{"type":130,"tag":154,"props":201,"children":202},{},[203,205,209],{"type":139,"value":204},"Supports native lazy loading as well as other ",{"type":130,"tag":135,"props":206,"children":207},{"className":118},[208],{"type":139,"value":146},{"type":139,"value":210}," attributes",{"type":130,"tag":212,"props":213,"children":214},"h2",{"id":116},[215],{"type":139,"value":21},{"type":130,"tag":131,"props":217,"children":218},{},[219,223,225,230,232,236],{"type":130,"tag":135,"props":220,"children":221},{"className":118},[222],{"type":139,"value":25},{"type":139,"value":224}," outputs a native ",{"type":130,"tag":135,"props":226,"children":227},{"className":118},[228],{"type":139,"value":229},"img",{"type":139,"value":231}," tag directly (without any wrapper around it). Use it like you would use the ",{"type":130,"tag":135,"props":233,"children":234},{"className":118},[235],{"type":139,"value":146},{"type":139,"value":237}," tag:",{"type":130,"tag":239,"props":240,"children":244},"pre",{"className":241,"code":242,"language":243,"meta":118,"style":118},"language-html shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","\u003CNuxtImg src=\"/nuxt-icon.png\" />\n","html",[245],{"type":130,"tag":135,"props":246,"children":247},{"__ignoreMap":118},[248],{"type":130,"tag":249,"props":250,"children":253},"span",{"class":251,"line":252},"line",1,[254,260,266,272,277,282,288,292],{"type":130,"tag":249,"props":255,"children":257},{"style":256},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5",[258],{"type":139,"value":259},"\u003C",{"type":130,"tag":249,"props":261,"children":263},{"style":262},"color:#F07178;--shiki-dark:#F07178;--shiki-light:#E53935",[264],{"type":139,"value":265},"NuxtImg",{"type":130,"tag":249,"props":267,"children":269},{"style":268},"color:#C792EA;--shiki-dark:#C792EA;--shiki-light:#9C3EDA",[270],{"type":139,"value":271}," src",{"type":130,"tag":249,"props":273,"children":274},{"style":256},[275],{"type":139,"value":276},"=",{"type":130,"tag":249,"props":278,"children":279},{"style":256},[280],{"type":139,"value":281},"\"",{"type":130,"tag":249,"props":283,"children":285},{"style":284},"color:#C3E88D;--shiki-dark:#C3E88D;--shiki-light:#91B859",[286],{"type":139,"value":287},"/nuxt-icon.png",{"type":130,"tag":249,"props":289,"children":290},{"style":256},[291],{"type":139,"value":281},{"type":130,"tag":249,"props":293,"children":294},{"style":256},[295],{"type":139,"value":296}," />",{"type":130,"tag":131,"props":298,"children":299},{},[300],{"type":139,"value":301},"Will result in:",{"type":130,"tag":239,"props":303,"children":305},{"className":241,"code":304,"language":243,"meta":118,"style":118},"\u003Cimg src=\"/nuxt-icon.png\" />\n",[306],{"type":130,"tag":135,"props":307,"children":308},{"__ignoreMap":118},[309],{"type":130,"tag":249,"props":310,"children":311},{"class":251,"line":252},[312,316,320,324,328,332,336,340],{"type":130,"tag":249,"props":313,"children":314},{"style":256},[315],{"type":139,"value":259},{"type":130,"tag":249,"props":317,"children":318},{"style":262},[319],{"type":139,"value":229},{"type":130,"tag":249,"props":321,"children":322},{"style":268},[323],{"type":139,"value":271},{"type":130,"tag":249,"props":325,"children":326},{"style":256},[327],{"type":139,"value":276},{"type":130,"tag":249,"props":329,"children":330},{"style":256},[331],{"type":139,"value":281},{"type":130,"tag":249,"props":333,"children":334},{"style":284},[335],{"type":139,"value":287},{"type":130,"tag":249,"props":337,"children":338},{"style":256},[339],{"type":139,"value":281},{"type":130,"tag":249,"props":341,"children":342},{"style":256},[343],{"type":139,"value":296},{"type":130,"tag":345,"props":346,"children":347},"callout",{},[348],{"type":130,"tag":131,"props":349,"children":350},{},[351,353,359,361,365,367,372],{"type":139,"value":352},"With ",{"type":130,"tag":354,"props":355,"children":356},"a",{"href":16},[357],{"type":139,"value":358},"default provider",{"type":139,"value":360},", you should put ",{"type":130,"tag":135,"props":362,"children":363},{"className":118},[364],{"type":139,"value":287},{"type":139,"value":366}," inside ",{"type":130,"tag":135,"props":368,"children":369},{"className":118},[370],{"type":139,"value":371},"public/",{"type":139,"value":373}," directory for Nuxt 3 make the above example work.",{"type":130,"tag":212,"props":375,"children":377},{"id":376},"props",[378],{"type":139,"value":379},"Props",{"type":130,"tag":381,"props":382,"children":383},"h3",{"id":168},[384],{"type":130,"tag":135,"props":385,"children":386},{"className":118},[387],{"type":139,"value":168},{"type":130,"tag":131,"props":389,"children":390},{},[391],{"type":139,"value":392},"Path to image file",{"type":130,"tag":131,"props":394,"children":395},{},[396,400,402,406,408,413],{"type":130,"tag":135,"props":397,"children":398},{"className":118},[399],{"type":139,"value":168},{"type":139,"value":401}," should be in the form of an absolute path for static images in ",{"type":130,"tag":135,"props":403,"children":404},{"className":118},[405],{"type":139,"value":371},{"type":139,"value":407}," directory.\nOtherwise path that is expected by provider that starts with ",{"type":130,"tag":135,"props":409,"children":410},{"className":118},[411],{"type":139,"value":412},"/",{"type":139,"value":414}," or a URL.",{"type":130,"tag":239,"props":416,"children":418},{"className":241,"code":417,"language":243,"meta":118,"style":118},"\u003CNuxtImg src=\"/nuxt.png\" />\n",[419],{"type":130,"tag":135,"props":420,"children":421},{"__ignoreMap":118},[422],{"type":130,"tag":249,"props":423,"children":424},{"class":251,"line":252},[425,429,433,437,441,445,450,454],{"type":130,"tag":249,"props":426,"children":427},{"style":256},[428],{"type":139,"value":259},{"type":130,"tag":249,"props":430,"children":431},{"style":262},[432],{"type":139,"value":265},{"type":130,"tag":249,"props":434,"children":435},{"style":268},[436],{"type":139,"value":271},{"type":130,"tag":249,"props":438,"children":439},{"style":256},[440],{"type":139,"value":276},{"type":130,"tag":249,"props":442,"children":443},{"style":256},[444],{"type":139,"value":281},{"type":130,"tag":249,"props":446,"children":447},{"style":284},[448],{"type":139,"value":449},"/nuxt.png",{"type":130,"tag":249,"props":451,"children":452},{"style":256},[453],{"type":139,"value":281},{"type":130,"tag":249,"props":455,"children":456},{"style":256},[457],{"type":139,"value":296},{"type":130,"tag":131,"props":459,"children":460},{},[461,463,467,469,478],{"type":139,"value":462},"For image optimization when using external urls in ",{"type":130,"tag":135,"props":464,"children":465},{"className":118},[466],{"type":139,"value":168},{"type":139,"value":468},", we need to whitelist them using ",{"type":130,"tag":354,"props":470,"children":472},{"href":471},"/get-started/configuration#domains",[473],{"type":130,"tag":135,"props":474,"children":475},{"className":118},[476],{"type":139,"value":477},"domains",{"type":139,"value":479}," option.",{"type":130,"tag":381,"props":481,"children":483},{"id":482},"width-height",[484,488,490],{"type":130,"tag":135,"props":485,"children":486},{"className":118},[487],{"type":139,"value":180},{"type":139,"value":489}," / ",{"type":130,"tag":135,"props":491,"children":492},{"className":118},[493],{"type":139,"value":187},{"type":130,"tag":131,"props":495,"children":496},{},[497],{"type":139,"value":498},"Specify width/height of the image.",{"type":130,"tag":150,"props":500,"children":501},{},[502,507],{"type":130,"tag":154,"props":503,"children":504},{},[505],{"type":139,"value":506},"Use desired width/height for static sized images like icons or avatars",{"type":130,"tag":154,"props":508,"children":509},{},[510,512,520],{"type":139,"value":511},"Use original image width/height for responsive images (when using ",{"type":130,"tag":354,"props":513,"children":515},{"href":514},"#sizes",[516],{"type":130,"tag":135,"props":517,"children":518},{"className":118},[519],{"type":139,"value":197},{"type":139,"value":521},")",{"type":130,"tag":381,"props":523,"children":524},{"id":197},[525],{"type":130,"tag":135,"props":526,"children":527},{"className":118},[528],{"type":139,"value":197},{"type":130,"tag":131,"props":530,"children":531},{},[532],{"type":139,"value":533},"Specify responsive sizes.",{"type":130,"tag":131,"props":535,"children":536},{},[537,539,545],{"type":139,"value":538},"This is a space-separated list of screen size/width pairs. You can ",{"type":130,"tag":354,"props":540,"children":542},{"href":541},"/get-started/configuration#screens",[543],{"type":139,"value":544},"see a list of the defined screen sizes here",{"type":139,"value":546},").",{"type":130,"tag":131,"props":548,"children":549},{},[550,552,558],{"type":139,"value":551},"By default Nuxt generates ",{"type":130,"tag":553,"props":554,"children":555},"em",{},[556],{"type":139,"value":557},"responsive-first",{"type":139,"value":559}," sizing.",{"type":130,"tag":150,"props":561,"children":562},{},[563,575],{"type":130,"tag":154,"props":564,"children":565},{},[566,568,573],{"type":139,"value":567},"If you omit a screen size prefix (like ",{"type":130,"tag":135,"props":569,"children":570},{"className":118},[571],{"type":139,"value":572},"sm:",{"type":139,"value":574},") then this size is the 'default' size of the image. Otherwise, Nuxt will pick the smallest size as the default size of the image.",{"type":130,"tag":154,"props":576,"children":577},{},[578,580,585,587,592,594,599,601,606],{"type":139,"value":579},"This default size is used up until the next specified screen width, and so on. Each specified size pair applies ",{"type":130,"tag":553,"props":581,"children":582},{},[583],{"type":139,"value":584},"up",{"type":139,"value":586}," - so ",{"type":130,"tag":135,"props":588,"children":589},{"className":118},[590],{"type":139,"value":591},"md:400px",{"type":139,"value":593}," means that the image will be sized ",{"type":130,"tag":135,"props":595,"children":596},{"className":118},[597],{"type":139,"value":598},"400px",{"type":139,"value":600}," on ",{"type":130,"tag":135,"props":602,"children":603},{"className":118},[604],{"type":139,"value":605},"md",{"type":139,"value":607}," screens and up.",{"type":130,"tag":131,"props":609,"children":610},{},[611],{"type":130,"tag":612,"props":613,"children":614},"strong",{},[615],{"type":139,"value":616},"Example:",{"type":130,"tag":239,"props":618,"children":620},{"className":241,"code":619,"language":243,"meta":118,"style":118},"\u003CNuxtImg\n  src=\"/logos/nuxt.png\"\n  sizes=\"100vw sm:50vw md:400px\"\n/>\n",[621],{"type":130,"tag":135,"props":622,"children":623},{"__ignoreMap":118},[624,635,661,687],{"type":130,"tag":249,"props":625,"children":626},{"class":251,"line":252},[627,631],{"type":130,"tag":249,"props":628,"children":629},{"style":256},[630],{"type":139,"value":259},{"type":130,"tag":249,"props":632,"children":633},{"style":262},[634],{"type":139,"value":265},{"type":130,"tag":249,"props":636,"children":638},{"class":251,"line":637},2,[639,644,648,652,657],{"type":130,"tag":249,"props":640,"children":641},{"style":268},[642],{"type":139,"value":643},"  src",{"type":130,"tag":249,"props":645,"children":646},{"style":256},[647],{"type":139,"value":276},{"type":130,"tag":249,"props":649,"children":650},{"style":256},[651],{"type":139,"value":281},{"type":130,"tag":249,"props":653,"children":654},{"style":284},[655],{"type":139,"value":656},"/logos/nuxt.png",{"type":130,"tag":249,"props":658,"children":659},{"style":256},[660],{"type":139,"value":281},{"type":130,"tag":249,"props":662,"children":664},{"class":251,"line":663},3,[665,670,674,678,683],{"type":130,"tag":249,"props":666,"children":667},{"style":268},[668],{"type":139,"value":669},"  sizes",{"type":130,"tag":249,"props":671,"children":672},{"style":256},[673],{"type":139,"value":276},{"type":130,"tag":249,"props":675,"children":676},{"style":256},[677],{"type":139,"value":281},{"type":130,"tag":249,"props":679,"children":680},{"style":284},[681],{"type":139,"value":682},"100vw sm:50vw md:400px",{"type":130,"tag":249,"props":684,"children":685},{"style":256},[686],{"type":139,"value":281},{"type":130,"tag":249,"props":688,"children":690},{"class":251,"line":689},4,[691],{"type":130,"tag":249,"props":692,"children":693},{"style":256},[694],{"type":139,"value":695},"/>",{"type":130,"tag":381,"props":697,"children":699},{"id":698},"densities",[700],{"type":130,"tag":135,"props":701,"children":702},{"className":118},[703],{"type":139,"value":698},{"type":130,"tag":131,"props":705,"children":706},{},[707],{"type":139,"value":708},"To generate special versions of images for screens with increased pixel density.",{"type":130,"tag":131,"props":710,"children":711},{},[712],{"type":130,"tag":612,"props":713,"children":714},{},[715],{"type":139,"value":616},{"type":130,"tag":239,"props":717,"children":719},{"className":241,"code":718,"language":243,"meta":118,"style":118},"\u003CNuxtImg\n  src=\"/logos/nuxt.png\"\n  height=\"50\"\n  densities=\"x1 x2\"\n/>\n\u003C!--\n\u003Cimg\n  src=\"/_ipx/w_50/logos/nuxt.png\" \n  srcset=\"/_ipx/w_100/logos/nuxt.png x2\"\n/>\n-->\n",[720],{"type":130,"tag":135,"props":721,"children":722},{"__ignoreMap":118},[723,734,757,782,807,815,825,834,843,852,860],{"type":130,"tag":249,"props":724,"children":725},{"class":251,"line":252},[726,730],{"type":130,"tag":249,"props":727,"children":728},{"style":256},[729],{"type":139,"value":259},{"type":130,"tag":249,"props":731,"children":732},{"style":262},[733],{"type":139,"value":265},{"type":130,"tag":249,"props":735,"children":736},{"class":251,"line":637},[737,741,745,749,753],{"type":130,"tag":249,"props":738,"children":739},{"style":268},[740],{"type":139,"value":643},{"type":130,"tag":249,"props":742,"children":743},{"style":256},[744],{"type":139,"value":276},{"type":130,"tag":249,"props":746,"children":747},{"style":256},[748],{"type":139,"value":281},{"type":130,"tag":249,"props":750,"children":751},{"style":284},[752],{"type":139,"value":656},{"type":130,"tag":249,"props":754,"children":755},{"style":256},[756],{"type":139,"value":281},{"type":130,"tag":249,"props":758,"children":759},{"class":251,"line":663},[760,765,769,773,778],{"type":130,"tag":249,"props":761,"children":762},{"style":268},[763],{"type":139,"value":764},"  height",{"type":130,"tag":249,"props":766,"children":767},{"style":256},[768],{"type":139,"value":276},{"type":130,"tag":249,"props":770,"children":771},{"style":256},[772],{"type":139,"value":281},{"type":130,"tag":249,"props":774,"children":775},{"style":284},[776],{"type":139,"value":777},"50",{"type":130,"tag":249,"props":779,"children":780},{"style":256},[781],{"type":139,"value":281},{"type":130,"tag":249,"props":783,"children":784},{"class":251,"line":689},[785,790,794,798,803],{"type":130,"tag":249,"props":786,"children":787},{"style":268},[788],{"type":139,"value":789},"  densities",{"type":130,"tag":249,"props":791,"children":792},{"style":256},[793],{"type":139,"value":276},{"type":130,"tag":249,"props":795,"children":796},{"style":256},[797],{"type":139,"value":281},{"type":130,"tag":249,"props":799,"children":800},{"style":284},[801],{"type":139,"value":802},"x1 x2",{"type":130,"tag":249,"props":804,"children":805},{"style":256},[806],{"type":139,"value":281},{"type":130,"tag":249,"props":808,"children":810},{"class":251,"line":809},5,[811],{"type":130,"tag":249,"props":812,"children":813},{"style":256},[814],{"type":139,"value":695},{"type":130,"tag":249,"props":816,"children":818},{"class":251,"line":817},6,[819],{"type":130,"tag":249,"props":820,"children":822},{"style":821},"color:#546E7A;--shiki-dark:#676E95;--shiki-light:#90A4AE;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[823],{"type":139,"value":824},"\u003C!--",{"type":130,"tag":249,"props":826,"children":828},{"class":251,"line":827},7,[829],{"type":130,"tag":249,"props":830,"children":831},{"style":821},[832],{"type":139,"value":833},"\u003Cimg",{"type":130,"tag":249,"props":835,"children":837},{"class":251,"line":836},8,[838],{"type":130,"tag":249,"props":839,"children":840},{"style":821},[841],{"type":139,"value":842},"  src=\"/_ipx/w_50/logos/nuxt.png\" ",{"type":130,"tag":249,"props":844,"children":846},{"class":251,"line":845},9,[847],{"type":130,"tag":249,"props":848,"children":849},{"style":821},[850],{"type":139,"value":851},"  srcset=\"/_ipx/w_100/logos/nuxt.png x2\"",{"type":130,"tag":249,"props":853,"children":855},{"class":251,"line":854},10,[856],{"type":130,"tag":249,"props":857,"children":858},{"style":821},[859],{"type":139,"value":695},{"type":130,"tag":249,"props":861,"children":863},{"class":251,"line":862},11,[864],{"type":130,"tag":249,"props":865,"children":866},{"style":821},[867],{"type":139,"value":868},"-->",{"type":130,"tag":381,"props":870,"children":872},{"id":871},"placeholder",[873],{"type":130,"tag":135,"props":874,"children":875},{"className":118},[876],{"type":139,"value":871},{"type":130,"tag":131,"props":878,"children":879},{},[880],{"type":139,"value":881},"Display a placeholder image before the actual image is fully loaded.",{"type":130,"tag":131,"props":883,"children":884},{},[885],{"type":139,"value":886},"The placeholder prop can be either a string, a boolean, a number, or an array. The usage is shown below for each case.",{"type":130,"tag":239,"props":888,"children":890},{"className":241,"code":889,"language":243,"meta":118,"style":118},"\u003C!-- Automatically generate a placeholder based on the original image -->\n\u003Cnuxt-img src=\"/nuxt.png\" placeholder />\n\n\u003C!-- Set a width, height for the automatically generated placeholder  -->\n\u003Cnuxt-img src=\"/nuxt.png\" :placeholder=\"[50, 25]\" />\n\n\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->\n\u003Cnuxt-img src=\"/nuxt.png\" :placeholder=\"[50, 25, 75, 5]\" />\n\n\u003C!-- Set the width & height of the automatically generated placeholder, image will be a square -->\n\u003Cnuxt-img src=\"/nuxt.png\" :placeholder=\"15\" />\n\n\u003C!-- Provide your own image -->\n\u003Cnuxt-img src=\"/nuxt.png\" placeholder=\"./placeholder.png\" />\n",[891],{"type":130,"tag":135,"props":892,"children":893},{"__ignoreMap":118},[894,902,943,946,954,1011,1014,1022,1078,1081,1089,1145,1149,1158],{"type":130,"tag":249,"props":895,"children":896},{"class":251,"line":252},[897],{"type":130,"tag":249,"props":898,"children":899},{"style":821},[900],{"type":139,"value":901},"\u003C!-- Automatically generate a placeholder based on the original image -->",{"type":130,"tag":249,"props":903,"children":904},{"class":251,"line":637},[905,909,914,918,922,926,930,934,939],{"type":130,"tag":249,"props":906,"children":907},{"style":256},[908],{"type":139,"value":259},{"type":130,"tag":249,"props":910,"children":911},{"style":262},[912],{"type":139,"value":913},"nuxt-img",{"type":130,"tag":249,"props":915,"children":916},{"style":268},[917],{"type":139,"value":271},{"type":130,"tag":249,"props":919,"children":920},{"style":256},[921],{"type":139,"value":276},{"type":130,"tag":249,"props":923,"children":924},{"style":256},[925],{"type":139,"value":281},{"type":130,"tag":249,"props":927,"children":928},{"style":284},[929],{"type":139,"value":449},{"type":130,"tag":249,"props":931,"children":932},{"style":256},[933],{"type":139,"value":281},{"type":130,"tag":249,"props":935,"children":936},{"style":268},[937],{"type":139,"value":938}," placeholder",{"type":130,"tag":249,"props":940,"children":941},{"style":256},[942],{"type":139,"value":296},{"type":130,"tag":249,"props":944,"children":945},{"class":251,"line":663},[],{"type":130,"tag":249,"props":947,"children":948},{"class":251,"line":689},[949],{"type":130,"tag":249,"props":950,"children":951},{"style":821},[952],{"type":139,"value":953},"\u003C!-- Set a width, height for the automatically generated placeholder  -->",{"type":130,"tag":249,"props":955,"children":956},{"class":251,"line":809},[957,961,965,969,973,977,981,985,990,994,998,1003,1007],{"type":130,"tag":249,"props":958,"children":959},{"style":256},[960],{"type":139,"value":259},{"type":130,"tag":249,"props":962,"children":963},{"style":262},[964],{"type":139,"value":913},{"type":130,"tag":249,"props":966,"children":967},{"style":268},[968],{"type":139,"value":271},{"type":130,"tag":249,"props":970,"children":971},{"style":256},[972],{"type":139,"value":276},{"type":130,"tag":249,"props":974,"children":975},{"style":256},[976],{"type":139,"value":281},{"type":130,"tag":249,"props":978,"children":979},{"style":284},[980],{"type":139,"value":449},{"type":130,"tag":249,"props":982,"children":983},{"style":256},[984],{"type":139,"value":281},{"type":130,"tag":249,"props":986,"children":987},{"style":268},[988],{"type":139,"value":989}," :placeholder",{"type":130,"tag":249,"props":991,"children":992},{"style":256},[993],{"type":139,"value":276},{"type":130,"tag":249,"props":995,"children":996},{"style":256},[997],{"type":139,"value":281},{"type":130,"tag":249,"props":999,"children":1000},{"style":284},[1001],{"type":139,"value":1002},"[50, 25]",{"type":130,"tag":249,"props":1004,"children":1005},{"style":256},[1006],{"type":139,"value":281},{"type":130,"tag":249,"props":1008,"children":1009},{"style":256},[1010],{"type":139,"value":296},{"type":130,"tag":249,"props":1012,"children":1013},{"class":251,"line":817},[],{"type":130,"tag":249,"props":1015,"children":1016},{"class":251,"line":827},[1017],{"type":130,"tag":249,"props":1018,"children":1019},{"style":821},[1020],{"type":139,"value":1021},"\u003C!-- Set a width, height, quality & blur for the automatically generated placeholder  -->",{"type":130,"tag":249,"props":1023,"children":1024},{"class":251,"line":836},[1025,1029,1033,1037,1041,1045,1049,1053,1057,1061,1065,1070,1074],{"type":130,"tag":249,"props":1026,"children":1027},{"style":256},[1028],{"type":139,"value":259},{"type":130,"tag":249,"props":1030,"children":1031},{"style":262},[1032],{"type":139,"value":913},{"type":130,"tag":249,"props":1034,"children":1035},{"style":268},[1036],{"type":139,"value":271},{"type":130,"tag":249,"props":1038,"children":1039},{"style":256},[1040],{"type":139,"value":276},{"type":130,"tag":249,"props":1042,"children":1043},{"style":256},[1044],{"type":139,"value":281},{"type":130,"tag":249,"props":1046,"children":1047},{"style":284},[1048],{"type":139,"value":449},{"type":130,"tag":249,"props":1050,"children":1051},{"style":256},[1052],{"type":139,"value":281},{"type":130,"tag":249,"props":1054,"children":1055},{"style":268},[1056],{"type":139,"value":989},{"type":130,"tag":249,"props":1058,"children":1059},{"style":256},[1060],{"type":139,"value":276},{"type":130,"tag":249,"props":1062,"children":1063},{"style":256},[1064],{"type":139,"value":281},{"type":130,"tag":249,"props":1066,"children":1067},{"style":284},[1068],{"type":139,"value":1069},"[50, 25, 75, 5]",{"type":130,"tag":249,"props":1071,"children":1072},{"style":256},[1073],{"type":139,"value":281},{"type":130,"tag":249,"props":1075,"children":1076},{"style":256},[1077],{"type":139,"value":296},{"type":130,"tag":249,"props":1079,"children":1080},{"class":251,"line":845},[],{"type":130,"tag":249,"props":1082,"children":1083},{"class":251,"line":854},[1084],{"type":130,"tag":249,"props":1085,"children":1086},{"style":821},[1087],{"type":139,"value":1088},"\u003C!-- Set the width & height of the automatically generated placeholder, image will be a square -->",{"type":130,"tag":249,"props":1090,"children":1091},{"class":251,"line":862},[1092,1096,1100,1104,1108,1112,1116,1120,1124,1128,1132,1137,1141],{"type":130,"tag":249,"props":1093,"children":1094},{"style":256},[1095],{"type":139,"value":259},{"type":130,"tag":249,"props":1097,"children":1098},{"style":262},[1099],{"type":139,"value":913},{"type":130,"tag":249,"props":1101,"children":1102},{"style":268},[1103],{"type":139,"value":271},{"type":130,"tag":249,"props":1105,"children":1106},{"style":256},[1107],{"type":139,"value":276},{"type":130,"tag":249,"props":1109,"children":1110},{"style":256},[1111],{"type":139,"value":281},{"type":130,"tag":249,"props":1113,"children":1114},{"style":284},[1115],{"type":139,"value":449},{"type":130,"tag":249,"props":1117,"children":1118},{"style":256},[1119],{"type":139,"value":281},{"type":130,"tag":249,"props":1121,"children":1122},{"style":268},[1123],{"type":139,"value":989},{"type":130,"tag":249,"props":1125,"children":1126},{"style":256},[1127],{"type":139,"value":276},{"type":130,"tag":249,"props":1129,"children":1130},{"style":256},[1131],{"type":139,"value":281},{"type":130,"tag":249,"props":1133,"children":1134},{"style":284},[1135],{"type":139,"value":1136},"15",{"type":130,"tag":249,"props":1138,"children":1139},{"style":256},[1140],{"type":139,"value":281},{"type":130,"tag":249,"props":1142,"children":1143},{"style":256},[1144],{"type":139,"value":296},{"type":130,"tag":249,"props":1146,"children":1148},{"class":251,"line":1147},12,[],{"type":130,"tag":249,"props":1150,"children":1152},{"class":251,"line":1151},13,[1153],{"type":130,"tag":249,"props":1154,"children":1155},{"style":821},[1156],{"type":139,"value":1157},"\u003C!-- Provide your own image -->",{"type":130,"tag":249,"props":1159,"children":1161},{"class":251,"line":1160},14,[1162,1166,1170,1174,1178,1182,1186,1190,1194,1198,1202,1207,1211],{"type":130,"tag":249,"props":1163,"children":1164},{"style":256},[1165],{"type":139,"value":259},{"type":130,"tag":249,"props":1167,"children":1168},{"style":262},[1169],{"type":139,"value":913},{"type":130,"tag":249,"props":1171,"children":1172},{"style":268},[1173],{"type":139,"value":271},{"type":130,"tag":249,"props":1175,"children":1176},{"style":256},[1177],{"type":139,"value":276},{"type":130,"tag":249,"props":1179,"children":1180},{"style":256},[1181],{"type":139,"value":281},{"type":130,"tag":249,"props":1183,"children":1184},{"style":284},[1185],{"type":139,"value":449},{"type":130,"tag":249,"props":1187,"children":1188},{"style":256},[1189],{"type":139,"value":281},{"type":130,"tag":249,"props":1191,"children":1192},{"style":268},[1193],{"type":139,"value":938},{"type":130,"tag":249,"props":1195,"children":1196},{"style":256},[1197],{"type":139,"value":276},{"type":130,"tag":249,"props":1199,"children":1200},{"style":256},[1201],{"type":139,"value":281},{"type":130,"tag":249,"props":1203,"children":1204},{"style":284},[1205],{"type":139,"value":1206},"./placeholder.png",{"type":130,"tag":249,"props":1208,"children":1209},{"style":256},[1210],{"type":139,"value":281},{"type":130,"tag":249,"props":1212,"children":1213},{"style":256},[1214],{"type":139,"value":296},{"type":130,"tag":131,"props":1216,"children":1217},{},[1218,1220,1227],{"type":139,"value":1219},"You can also leverage ",{"type":130,"tag":354,"props":1221,"children":1222},{"href":32},[1223],{"type":130,"tag":135,"props":1224,"children":1225},{"className":118},[1226],{"type":139,"value":31},{"type":139,"value":1228}," to generate a placeholder image based on the original image, can be useful if the source is an SVG or you want better control on the modifiers:",{"type":130,"tag":239,"props":1230,"children":1234},{"className":1231,"code":1232,"language":1233,"meta":118,"style":118},"language-vue shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","\u003Cscript setup>\nconst img = useImage()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CNuxtImg :placeholder=\"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })\" src=\"/nuxt.svg`\" />\n\u003C/template>\n","vue",[1235],{"type":130,"tag":135,"props":1236,"children":1237},{"__ignoreMap":118},[1238,1260,1289,1305,1308,1324,1382],{"type":130,"tag":249,"props":1239,"children":1240},{"class":251,"line":252},[1241,1245,1250,1255],{"type":130,"tag":249,"props":1242,"children":1243},{"style":256},[1244],{"type":139,"value":259},{"type":130,"tag":249,"props":1246,"children":1247},{"style":262},[1248],{"type":139,"value":1249},"script",{"type":130,"tag":249,"props":1251,"children":1252},{"style":268},[1253],{"type":139,"value":1254}," setup",{"type":130,"tag":249,"props":1256,"children":1257},{"style":256},[1258],{"type":139,"value":1259},">",{"type":130,"tag":249,"props":1261,"children":1262},{"class":251,"line":637},[1263,1268,1274,1278,1284],{"type":130,"tag":249,"props":1264,"children":1265},{"style":268},[1266],{"type":139,"value":1267},"const",{"type":130,"tag":249,"props":1269,"children":1271},{"style":1270},"color:#EEFFFF;--shiki-dark:#BABED8;--shiki-light:#90A4AE",[1272],{"type":139,"value":1273}," img ",{"type":130,"tag":249,"props":1275,"children":1276},{"style":256},[1277],{"type":139,"value":276},{"type":130,"tag":249,"props":1279,"children":1281},{"style":1280},"color:#82AAFF;--shiki-dark:#82AAFF;--shiki-light:#6182B8",[1282],{"type":139,"value":1283}," useImage",{"type":130,"tag":249,"props":1285,"children":1286},{"style":1270},[1287],{"type":139,"value":1288},"()",{"type":130,"tag":249,"props":1290,"children":1291},{"class":251,"line":663},[1292,1297,1301],{"type":130,"tag":249,"props":1293,"children":1294},{"style":256},[1295],{"type":139,"value":1296},"\u003C/",{"type":130,"tag":249,"props":1298,"children":1299},{"style":262},[1300],{"type":139,"value":1249},{"type":130,"tag":249,"props":1302,"children":1303},{"style":256},[1304],{"type":139,"value":1259},{"type":130,"tag":249,"props":1306,"children":1307},{"class":251,"line":689},[],{"type":130,"tag":249,"props":1309,"children":1310},{"class":251,"line":809},[1311,1315,1320],{"type":130,"tag":249,"props":1312,"children":1313},{"style":256},[1314],{"type":139,"value":259},{"type":130,"tag":249,"props":1316,"children":1317},{"style":262},[1318],{"type":139,"value":1319},"template",{"type":130,"tag":249,"props":1321,"children":1322},{"style":256},[1323],{"type":139,"value":1259},{"type":130,"tag":249,"props":1325,"children":1326},{"class":251,"line":817},[1327,1332,1336,1340,1344,1348,1353,1357,1361,1365,1369,1374,1378],{"type":130,"tag":249,"props":1328,"children":1329},{"style":256},[1330],{"type":139,"value":1331},"  \u003C",{"type":130,"tag":249,"props":1333,"children":1334},{"style":262},[1335],{"type":139,"value":265},{"type":130,"tag":249,"props":1337,"children":1338},{"style":268},[1339],{"type":139,"value":989},{"type":130,"tag":249,"props":1341,"children":1342},{"style":256},[1343],{"type":139,"value":276},{"type":130,"tag":249,"props":1345,"children":1346},{"style":256},[1347],{"type":139,"value":281},{"type":130,"tag":249,"props":1349,"children":1350},{"style":284},[1351],{"type":139,"value":1352},"img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })",{"type":130,"tag":249,"props":1354,"children":1355},{"style":256},[1356],{"type":139,"value":281},{"type":130,"tag":249,"props":1358,"children":1359},{"style":268},[1360],{"type":139,"value":271},{"type":130,"tag":249,"props":1362,"children":1363},{"style":256},[1364],{"type":139,"value":276},{"type":130,"tag":249,"props":1366,"children":1367},{"style":256},[1368],{"type":139,"value":281},{"type":130,"tag":249,"props":1370,"children":1371},{"style":284},[1372],{"type":139,"value":1373},"/nuxt.svg`",{"type":130,"tag":249,"props":1375,"children":1376},{"style":256},[1377],{"type":139,"value":281},{"type":130,"tag":249,"props":1379,"children":1380},{"style":256},[1381],{"type":139,"value":296},{"type":130,"tag":249,"props":1383,"children":1384},{"class":251,"line":827},[1385,1389,1393],{"type":130,"tag":249,"props":1386,"children":1387},{"style":256},[1388],{"type":139,"value":1296},{"type":130,"tag":249,"props":1390,"children":1391},{"style":262},[1392],{"type":139,"value":1319},{"type":130,"tag":249,"props":1394,"children":1395},{"style":256},[1396],{"type":139,"value":1259},{"type":130,"tag":381,"props":1398,"children":1400},{"id":1399},"provider",[1401],{"type":130,"tag":135,"props":1402,"children":1403},{"className":118},[1404],{"type":139,"value":1399},{"type":130,"tag":131,"props":1406,"children":1407},{},[1408,1410,1416,1418],{"type":139,"value":1409},"Use other provider instead of default ",{"type":130,"tag":354,"props":1411,"children":1413},{"href":1412},"/get-started/configuration#provider",[1414],{"type":139,"value":1415},"provider option",{"type":139,"value":1417}," specified in ",{"type":130,"tag":135,"props":1419,"children":1420},{"className":118},[1421],{"type":139,"value":1422},"nuxt.config",{"type":130,"tag":131,"props":1424,"children":1425},{},[1426],{"type":130,"tag":612,"props":1427,"children":1428},{},[1429],{"type":139,"value":616},{"type":130,"tag":1431,"props":1432,"children":1433},"code-group",{},[1434,1591],{"type":130,"tag":239,"props":1435,"children":1438},{"className":241,"code":1436,"filename":1437,"language":243,"meta":118,"style":118},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"cloudinary\"\n    src=\"/remote/nuxt-org/blog/going-full-static/main.png\"\n    width=\"300\"\n    height=\"169\"\n  />\n\u003C/template>\n","index.vue",[1439],{"type":130,"tag":135,"props":1440,"children":1441},{"__ignoreMap":118},[1442,1457,1468,1493,1518,1543,1568,1576],{"type":130,"tag":249,"props":1443,"children":1444},{"class":251,"line":252},[1445,1449,1453],{"type":130,"tag":249,"props":1446,"children":1447},{"style":256},[1448],{"type":139,"value":259},{"type":130,"tag":249,"props":1450,"children":1451},{"style":262},[1452],{"type":139,"value":1319},{"type":130,"tag":249,"props":1454,"children":1455},{"style":256},[1456],{"type":139,"value":1259},{"type":130,"tag":249,"props":1458,"children":1459},{"class":251,"line":637},[1460,1464],{"type":130,"tag":249,"props":1461,"children":1462},{"style":256},[1463],{"type":139,"value":1331},{"type":130,"tag":249,"props":1465,"children":1466},{"style":262},[1467],{"type":139,"value":265},{"type":130,"tag":249,"props":1469,"children":1470},{"class":251,"line":663},[1471,1476,1480,1484,1489],{"type":130,"tag":249,"props":1472,"children":1473},{"style":268},[1474],{"type":139,"value":1475},"    provider",{"type":130,"tag":249,"props":1477,"children":1478},{"style":256},[1479],{"type":139,"value":276},{"type":130,"tag":249,"props":1481,"children":1482},{"style":256},[1483],{"type":139,"value":281},{"type":130,"tag":249,"props":1485,"children":1486},{"style":284},[1487],{"type":139,"value":1488},"cloudinary",{"type":130,"tag":249,"props":1490,"children":1491},{"style":256},[1492],{"type":139,"value":281},{"type":130,"tag":249,"props":1494,"children":1495},{"class":251,"line":689},[1496,1501,1505,1509,1514],{"type":130,"tag":249,"props":1497,"children":1498},{"style":268},[1499],{"type":139,"value":1500},"    src",{"type":130,"tag":249,"props":1502,"children":1503},{"style":256},[1504],{"type":139,"value":276},{"type":130,"tag":249,"props":1506,"children":1507},{"style":256},[1508],{"type":139,"value":281},{"type":130,"tag":249,"props":1510,"children":1511},{"style":284},[1512],{"type":139,"value":1513},"/remote/nuxt-org/blog/going-full-static/main.png",{"type":130,"tag":249,"props":1515,"children":1516},{"style":256},[1517],{"type":139,"value":281},{"type":130,"tag":249,"props":1519,"children":1520},{"class":251,"line":809},[1521,1526,1530,1534,1539],{"type":130,"tag":249,"props":1522,"children":1523},{"style":268},[1524],{"type":139,"value":1525},"    width",{"type":130,"tag":249,"props":1527,"children":1528},{"style":256},[1529],{"type":139,"value":276},{"type":130,"tag":249,"props":1531,"children":1532},{"style":256},[1533],{"type":139,"value":281},{"type":130,"tag":249,"props":1535,"children":1536},{"style":284},[1537],{"type":139,"value":1538},"300",{"type":130,"tag":249,"props":1540,"children":1541},{"style":256},[1542],{"type":139,"value":281},{"type":130,"tag":249,"props":1544,"children":1545},{"class":251,"line":817},[1546,1551,1555,1559,1564],{"type":130,"tag":249,"props":1547,"children":1548},{"style":268},[1549],{"type":139,"value":1550},"    height",{"type":130,"tag":249,"props":1552,"children":1553},{"style":256},[1554],{"type":139,"value":276},{"type":130,"tag":249,"props":1556,"children":1557},{"style":256},[1558],{"type":139,"value":281},{"type":130,"tag":249,"props":1560,"children":1561},{"style":284},[1562],{"type":139,"value":1563},"169",{"type":130,"tag":249,"props":1565,"children":1566},{"style":256},[1567],{"type":139,"value":281},{"type":130,"tag":249,"props":1569,"children":1570},{"class":251,"line":827},[1571],{"type":130,"tag":249,"props":1572,"children":1573},{"style":256},[1574],{"type":139,"value":1575},"  />",{"type":130,"tag":249,"props":1577,"children":1578},{"class":251,"line":836},[1579,1583,1587],{"type":130,"tag":249,"props":1580,"children":1581},{"style":256},[1582],{"type":139,"value":1296},{"type":130,"tag":249,"props":1584,"children":1585},{"style":262},[1586],{"type":139,"value":1319},{"type":130,"tag":249,"props":1588,"children":1589},{"style":256},[1590],{"type":139,"value":1259},{"type":130,"tag":239,"props":1592,"children":1597},{"className":1593,"code":1594,"filename":1595,"language":1596,"meta":118,"style":118},"language-ts shiki shiki-themes material-theme material-theme-palenight material-theme-lighter","export default defineNuxtConfig({\n  image: {\n    cloudinary: {\n      baseURL: 'https://res.cloudinary.com/nuxt/image/upload/',\n    },\n  },\n})\n","nuxt.config.ts","ts",[1598],{"type":130,"tag":135,"props":1599,"children":1600},{"__ignoreMap":118},[1601,1630,1648,1664,1696,1704,1712],{"type":130,"tag":249,"props":1602,"children":1603},{"class":251,"line":252},[1604,1610,1615,1620,1625],{"type":130,"tag":249,"props":1605,"children":1607},{"style":1606},"color:#89DDFF;--shiki-dark:#89DDFF;--shiki-light:#39ADB5;font-style:italic;--shiki-dark-font-style:italic;--shiki-light-font-style:italic",[1608],{"type":139,"value":1609},"export",{"type":130,"tag":249,"props":1611,"children":1612},{"style":1606},[1613],{"type":139,"value":1614}," default",{"type":130,"tag":249,"props":1616,"children":1617},{"style":1280},[1618],{"type":139,"value":1619}," defineNuxtConfig",{"type":130,"tag":249,"props":1621,"children":1622},{"style":1270},[1623],{"type":139,"value":1624},"(",{"type":130,"tag":249,"props":1626,"children":1627},{"style":256},[1628],{"type":139,"value":1629},"{",{"type":130,"tag":249,"props":1631,"children":1632},{"class":251,"line":637},[1633,1638,1643],{"type":130,"tag":249,"props":1634,"children":1635},{"style":262},[1636],{"type":139,"value":1637},"  image",{"type":130,"tag":249,"props":1639,"children":1640},{"style":256},[1641],{"type":139,"value":1642},":",{"type":130,"tag":249,"props":1644,"children":1645},{"style":256},[1646],{"type":139,"value":1647}," {",{"type":130,"tag":249,"props":1649,"children":1650},{"class":251,"line":663},[1651,1656,1660],{"type":130,"tag":249,"props":1652,"children":1653},{"style":262},[1654],{"type":139,"value":1655},"    cloudinary",{"type":130,"tag":249,"props":1657,"children":1658},{"style":256},[1659],{"type":139,"value":1642},{"type":130,"tag":249,"props":1661,"children":1662},{"style":256},[1663],{"type":139,"value":1647},{"type":130,"tag":249,"props":1665,"children":1666},{"class":251,"line":689},[1667,1672,1676,1681,1686,1691],{"type":130,"tag":249,"props":1668,"children":1669},{"style":262},[1670],{"type":139,"value":1671},"      baseURL",{"type":130,"tag":249,"props":1673,"children":1674},{"style":256},[1675],{"type":139,"value":1642},{"type":130,"tag":249,"props":1677,"children":1678},{"style":256},[1679],{"type":139,"value":1680}," '",{"type":130,"tag":249,"props":1682,"children":1683},{"style":284},[1684],{"type":139,"value":1685},"https://res.cloudinary.com/nuxt/image/upload/",{"type":130,"tag":249,"props":1687,"children":1688},{"style":256},[1689],{"type":139,"value":1690},"'",{"type":130,"tag":249,"props":1692,"children":1693},{"style":256},[1694],{"type":139,"value":1695},",",{"type":130,"tag":249,"props":1697,"children":1698},{"class":251,"line":809},[1699],{"type":130,"tag":249,"props":1700,"children":1701},{"style":256},[1702],{"type":139,"value":1703},"    },",{"type":130,"tag":249,"props":1705,"children":1706},{"class":251,"line":817},[1707],{"type":130,"tag":249,"props":1708,"children":1709},{"style":256},[1710],{"type":139,"value":1711},"  },",{"type":130,"tag":249,"props":1713,"children":1714},{"class":251,"line":827},[1715,1720],{"type":130,"tag":249,"props":1716,"children":1717},{"style":256},[1718],{"type":139,"value":1719},"}",{"type":130,"tag":249,"props":1721,"children":1722},{"style":1270},[1723],{"type":139,"value":521},{"type":130,"tag":381,"props":1725,"children":1727},{"id":1726},"preset",[1728],{"type":130,"tag":135,"props":1729,"children":1730},{"className":118},[1731],{"type":139,"value":1726},{"type":130,"tag":131,"props":1733,"children":1734},{},[1735],{"type":139,"value":1736},"Presets are predefined sets of image modifiers that can be used create unified form of images in your projects.",{"type":130,"tag":345,"props":1738,"children":1739},{},[1740],{"type":130,"tag":131,"props":1741,"children":1742},{},[1743,1745,1751,1753],{"type":139,"value":1744},"We can define presets using ",{"type":130,"tag":354,"props":1746,"children":1748},{"href":1747},"/get-started/configuration#presets",[1749],{"type":139,"value":1750},"presets options",{"type":139,"value":1752}," in ",{"type":130,"tag":135,"props":1754,"children":1755},{"className":118},[1756],{"type":139,"value":1422},{"type":130,"tag":1431,"props":1758,"children":1759},{},[1760,1854],{"type":130,"tag":239,"props":1761,"children":1763},{"className":241,"code":1762,"filename":1437,"language":243,"meta":118,"style":118},"\u003Ctemplate>\n  \u003CNuxtImg preset=\"cover\" src=\"/nuxt-icon.png\" />\n\u003C/template>\n",[1764],{"type":130,"tag":135,"props":1765,"children":1766},{"__ignoreMap":118},[1767,1782,1839],{"type":130,"tag":249,"props":1768,"children":1769},{"class":251,"line":252},[1770,1774,1778],{"type":130,"tag":249,"props":1771,"children":1772},{"style":256},[1773],{"type":139,"value":259},{"type":130,"tag":249,"props":1775,"children":1776},{"style":262},[1777],{"type":139,"value":1319},{"type":130,"tag":249,"props":1779,"children":1780},{"style":256},[1781],{"type":139,"value":1259},{"type":130,"tag":249,"props":1783,"children":1784},{"class":251,"line":637},[1785,1789,1793,1798,1802,1806,1811,1815,1819,1823,1827,1831,1835],{"type":130,"tag":249,"props":1786,"children":1787},{"style":256},[1788],{"type":139,"value":1331},{"type":130,"tag":249,"props":1790,"children":1791},{"style":262},[1792],{"type":139,"value":265},{"type":130,"tag":249,"props":1794,"children":1795},{"style":268},[1796],{"type":139,"value":1797}," preset",{"type":130,"tag":249,"props":1799,"children":1800},{"style":256},[1801],{"type":139,"value":276},{"type":130,"tag":249,"props":1803,"children":1804},{"style":256},[1805],{"type":139,"value":281},{"type":130,"tag":249,"props":1807,"children":1808},{"style":284},[1809],{"type":139,"value":1810},"cover",{"type":130,"tag":249,"props":1812,"children":1813},{"style":256},[1814],{"type":139,"value":281},{"type":130,"tag":249,"props":1816,"children":1817},{"style":268},[1818],{"type":139,"value":271},{"type":130,"tag":249,"props":1820,"children":1821},{"style":256},[1822],{"type":139,"value":276},{"type":130,"tag":249,"props":1824,"children":1825},{"style":256},[1826],{"type":139,"value":281},{"type":130,"tag":249,"props":1828,"children":1829},{"style":284},[1830],{"type":139,"value":287},{"type":130,"tag":249,"props":1832,"children":1833},{"style":256},[1834],{"type":139,"value":281},{"type":130,"tag":249,"props":1836,"children":1837},{"style":256},[1838],{"type":139,"value":296},{"type":130,"tag":249,"props":1840,"children":1841},{"class":251,"line":663},[1842,1846,1850],{"type":130,"tag":249,"props":1843,"children":1844},{"style":256},[1845],{"type":139,"value":1296},{"type":130,"tag":249,"props":1847,"children":1848},{"style":262},[1849],{"type":139,"value":1319},{"type":130,"tag":249,"props":1851,"children":1852},{"style":256},[1853],{"type":139,"value":1259},{"type":130,"tag":239,"props":1855,"children":1857},{"className":1593,"code":1856,"filename":1595,"language":1596,"meta":118,"style":118},"export default defineNuxtConfig({\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",[1858],{"type":130,"tag":135,"props":1859,"children":1860},{"__ignoreMap":118},[1861,1884,1899,1915,1931,1947,1975,2004,2026,2046,2054,2062,2069,2076],{"type":130,"tag":249,"props":1862,"children":1863},{"class":251,"line":252},[1864,1868,1872,1876,1880],{"type":130,"tag":249,"props":1865,"children":1866},{"style":1606},[1867],{"type":139,"value":1609},{"type":130,"tag":249,"props":1869,"children":1870},{"style":1606},[1871],{"type":139,"value":1614},{"type":130,"tag":249,"props":1873,"children":1874},{"style":1280},[1875],{"type":139,"value":1619},{"type":130,"tag":249,"props":1877,"children":1878},{"style":1270},[1879],{"type":139,"value":1624},{"type":130,"tag":249,"props":1881,"children":1882},{"style":256},[1883],{"type":139,"value":1629},{"type":130,"tag":249,"props":1885,"children":1886},{"class":251,"line":637},[1887,1891,1895],{"type":130,"tag":249,"props":1888,"children":1889},{"style":262},[1890],{"type":139,"value":1637},{"type":130,"tag":249,"props":1892,"children":1893},{"style":256},[1894],{"type":139,"value":1642},{"type":130,"tag":249,"props":1896,"children":1897},{"style":256},[1898],{"type":139,"value":1647},{"type":130,"tag":249,"props":1900,"children":1901},{"class":251,"line":663},[1902,1907,1911],{"type":130,"tag":249,"props":1903,"children":1904},{"style":262},[1905],{"type":139,"value":1906},"    presets",{"type":130,"tag":249,"props":1908,"children":1909},{"style":256},[1910],{"type":139,"value":1642},{"type":130,"tag":249,"props":1912,"children":1913},{"style":256},[1914],{"type":139,"value":1647},{"type":130,"tag":249,"props":1916,"children":1917},{"class":251,"line":689},[1918,1923,1927],{"type":130,"tag":249,"props":1919,"children":1920},{"style":262},[1921],{"type":139,"value":1922},"      cover",{"type":130,"tag":249,"props":1924,"children":1925},{"style":256},[1926],{"type":139,"value":1642},{"type":130,"tag":249,"props":1928,"children":1929},{"style":256},[1930],{"type":139,"value":1647},{"type":130,"tag":249,"props":1932,"children":1933},{"class":251,"line":809},[1934,1939,1943],{"type":130,"tag":249,"props":1935,"children":1936},{"style":262},[1937],{"type":139,"value":1938},"        modifiers",{"type":130,"tag":249,"props":1940,"children":1941},{"style":256},[1942],{"type":139,"value":1642},{"type":130,"tag":249,"props":1944,"children":1945},{"style":256},[1946],{"type":139,"value":1647},{"type":130,"tag":249,"props":1948,"children":1949},{"class":251,"line":817},[1950,1955,1959,1963,1967,1971],{"type":130,"tag":249,"props":1951,"children":1952},{"style":262},[1953],{"type":139,"value":1954},"          fit",{"type":130,"tag":249,"props":1956,"children":1957},{"style":256},[1958],{"type":139,"value":1642},{"type":130,"tag":249,"props":1960,"children":1961},{"style":256},[1962],{"type":139,"value":1680},{"type":130,"tag":249,"props":1964,"children":1965},{"style":284},[1966],{"type":139,"value":1810},{"type":130,"tag":249,"props":1968,"children":1969},{"style":256},[1970],{"type":139,"value":1690},{"type":130,"tag":249,"props":1972,"children":1973},{"style":256},[1974],{"type":139,"value":1695},{"type":130,"tag":249,"props":1976,"children":1977},{"class":251,"line":827},[1978,1983,1987,1991,1996,2000],{"type":130,"tag":249,"props":1979,"children":1980},{"style":262},[1981],{"type":139,"value":1982},"          format",{"type":130,"tag":249,"props":1984,"children":1985},{"style":256},[1986],{"type":139,"value":1642},{"type":130,"tag":249,"props":1988,"children":1989},{"style":256},[1990],{"type":139,"value":1680},{"type":130,"tag":249,"props":1992,"children":1993},{"style":284},[1994],{"type":139,"value":1995},"jpg",{"type":130,"tag":249,"props":1997,"children":1998},{"style":256},[1999],{"type":139,"value":1690},{"type":130,"tag":249,"props":2001,"children":2002},{"style":256},[2003],{"type":139,"value":1695},{"type":130,"tag":249,"props":2005,"children":2006},{"class":251,"line":836},[2007,2012,2016,2022],{"type":130,"tag":249,"props":2008,"children":2009},{"style":262},[2010],{"type":139,"value":2011},"          width",{"type":130,"tag":249,"props":2013,"children":2014},{"style":256},[2015],{"type":139,"value":1642},{"type":130,"tag":249,"props":2017,"children":2019},{"style":2018},"color:#F78C6C;--shiki-dark:#F78C6C;--shiki-light:#F76D47",[2020],{"type":139,"value":2021}," 300",{"type":130,"tag":249,"props":2023,"children":2024},{"style":256},[2025],{"type":139,"value":1695},{"type":130,"tag":249,"props":2027,"children":2028},{"class":251,"line":845},[2029,2034,2038,2042],{"type":130,"tag":249,"props":2030,"children":2031},{"style":262},[2032],{"type":139,"value":2033},"          height",{"type":130,"tag":249,"props":2035,"children":2036},{"style":256},[2037],{"type":139,"value":1642},{"type":130,"tag":249,"props":2039,"children":2040},{"style":2018},[2041],{"type":139,"value":2021},{"type":130,"tag":249,"props":2043,"children":2044},{"style":256},[2045],{"type":139,"value":1695},{"type":130,"tag":249,"props":2047,"children":2048},{"class":251,"line":854},[2049],{"type":130,"tag":249,"props":2050,"children":2051},{"style":256},[2052],{"type":139,"value":2053},"        },",{"type":130,"tag":249,"props":2055,"children":2056},{"class":251,"line":862},[2057],{"type":130,"tag":249,"props":2058,"children":2059},{"style":256},[2060],{"type":139,"value":2061},"      },",{"type":130,"tag":249,"props":2063,"children":2064},{"class":251,"line":1147},[2065],{"type":130,"tag":249,"props":2066,"children":2067},{"style":256},[2068],{"type":139,"value":1703},{"type":130,"tag":249,"props":2070,"children":2071},{"class":251,"line":1151},[2072],{"type":130,"tag":249,"props":2073,"children":2074},{"style":256},[2075],{"type":139,"value":1711},{"type":130,"tag":249,"props":2077,"children":2078},{"class":251,"line":1160},[2079,2083],{"type":130,"tag":249,"props":2080,"children":2081},{"style":256},[2082],{"type":139,"value":1719},{"type":130,"tag":249,"props":2084,"children":2085},{"style":1270},[2086],{"type":139,"value":521},{"type":130,"tag":381,"props":2088,"children":2090},{"id":2089},"format",[2091],{"type":130,"tag":135,"props":2092,"children":2093},{"className":118},[2094],{"type":139,"value":2089},{"type":130,"tag":131,"props":2096,"children":2097},{},[2098],{"type":139,"value":2099},"In case you want to serve images in a specific format, use this prop.",{"type":130,"tag":239,"props":2101,"children":2103},{"className":241,"code":2102,"language":243,"meta":118,"style":118},"\u003CNuxtImg format=\"webp\" src=\"/nuxt-icon.png\" ... />\n",[2104],{"type":130,"tag":135,"props":2105,"children":2106},{"__ignoreMap":118},[2107],{"type":130,"tag":249,"props":2108,"children":2109},{"class":251,"line":252},[2110,2114,2118,2123,2127,2131,2136,2140,2144,2148,2152,2156,2160,2165],{"type":130,"tag":249,"props":2111,"children":2112},{"style":256},[2113],{"type":139,"value":259},{"type":130,"tag":249,"props":2115,"children":2116},{"style":262},[2117],{"type":139,"value":265},{"type":130,"tag":249,"props":2119,"children":2120},{"style":268},[2121],{"type":139,"value":2122}," format",{"type":130,"tag":249,"props":2124,"children":2125},{"style":256},[2126],{"type":139,"value":276},{"type":130,"tag":249,"props":2128,"children":2129},{"style":256},[2130],{"type":139,"value":281},{"type":130,"tag":249,"props":2132,"children":2133},{"style":284},[2134],{"type":139,"value":2135},"webp",{"type":130,"tag":249,"props":2137,"children":2138},{"style":256},[2139],{"type":139,"value":281},{"type":130,"tag":249,"props":2141,"children":2142},{"style":268},[2143],{"type":139,"value":271},{"type":130,"tag":249,"props":2145,"children":2146},{"style":256},[2147],{"type":139,"value":276},{"type":130,"tag":249,"props":2149,"children":2150},{"style":256},[2151],{"type":139,"value":281},{"type":130,"tag":249,"props":2153,"children":2154},{"style":284},[2155],{"type":139,"value":287},{"type":130,"tag":249,"props":2157,"children":2158},{"style":256},[2159],{"type":139,"value":281},{"type":130,"tag":249,"props":2161,"children":2162},{"style":268},[2163],{"type":139,"value":2164}," ...",{"type":130,"tag":249,"props":2166,"children":2167},{"style":256},[2168],{"type":139,"value":296},{"type":130,"tag":131,"props":2170,"children":2171},{},[2172,2174,2178,2180,2185,2186,2191,2192,2196,2197,2202,2203,2208,2209,2214],{"type":139,"value":2173},"Available formats are ",{"type":130,"tag":135,"props":2175,"children":2176},{"className":118},[2177],{"type":139,"value":2135},{"type":139,"value":2179},", ",{"type":130,"tag":135,"props":2181,"children":2182},{"className":118},[2183],{"type":139,"value":2184},"avif",{"type":139,"value":2179},{"type":130,"tag":135,"props":2187,"children":2188},{"className":118},[2189],{"type":139,"value":2190},"jpeg",{"type":139,"value":2179},{"type":130,"tag":135,"props":2193,"children":2194},{"className":118},[2195],{"type":139,"value":1995},{"type":139,"value":2179},{"type":130,"tag":135,"props":2198,"children":2199},{"className":118},[2200],{"type":139,"value":2201},"png",{"type":139,"value":2179},{"type":130,"tag":135,"props":2204,"children":2205},{"className":118},[2206],{"type":139,"value":2207},"gif",{"type":139,"value":182},{"type":130,"tag":135,"props":2210,"children":2211},{"className":118},[2212],{"type":139,"value":2213},"svg",{"type":139,"value":2215},". If the format is not specified, it will respect the default image format.",{"type":130,"tag":381,"props":2217,"children":2219},{"id":2218},"quality",[2220],{"type":130,"tag":135,"props":2221,"children":2222},{"className":118},[2223],{"type":139,"value":2218},{"type":130,"tag":131,"props":2225,"children":2226},{},[2227],{"type":139,"value":2228},"The quality for the generated image(s).",{"type":130,"tag":239,"props":2230,"children":2232},{"className":241,"code":2231,"language":243,"meta":118,"style":118},"\u003CNuxtImg src=\"/nuxt.jpg\" quality=\"80\" width=\"200\" height=\"100\" />\n",[2233],{"type":130,"tag":135,"props":2234,"children":2235},{"__ignoreMap":118},[2236],{"type":130,"tag":249,"props":2237,"children":2238},{"class":251,"line":252},[2239,2243,2247,2251,2255,2259,2264,2268,2273,2277,2281,2286,2290,2295,2299,2303,2308,2312,2317,2321,2325,2330,2334],{"type":130,"tag":249,"props":2240,"children":2241},{"style":256},[2242],{"type":139,"value":259},{"type":130,"tag":249,"props":2244,"children":2245},{"style":262},[2246],{"type":139,"value":265},{"type":130,"tag":249,"props":2248,"children":2249},{"style":268},[2250],{"type":139,"value":271},{"type":130,"tag":249,"props":2252,"children":2253},{"style":256},[2254],{"type":139,"value":276},{"type":130,"tag":249,"props":2256,"children":2257},{"style":256},[2258],{"type":139,"value":281},{"type":130,"tag":249,"props":2260,"children":2261},{"style":284},[2262],{"type":139,"value":2263},"/nuxt.jpg",{"type":130,"tag":249,"props":2265,"children":2266},{"style":256},[2267],{"type":139,"value":281},{"type":130,"tag":249,"props":2269,"children":2270},{"style":268},[2271],{"type":139,"value":2272}," quality",{"type":130,"tag":249,"props":2274,"children":2275},{"style":256},[2276],{"type":139,"value":276},{"type":130,"tag":249,"props":2278,"children":2279},{"style":256},[2280],{"type":139,"value":281},{"type":130,"tag":249,"props":2282,"children":2283},{"style":284},[2284],{"type":139,"value":2285},"80",{"type":130,"tag":249,"props":2287,"children":2288},{"style":256},[2289],{"type":139,"value":281},{"type":130,"tag":249,"props":2291,"children":2292},{"style":268},[2293],{"type":139,"value":2294}," width",{"type":130,"tag":249,"props":2296,"children":2297},{"style":256},[2298],{"type":139,"value":276},{"type":130,"tag":249,"props":2300,"children":2301},{"style":256},[2302],{"type":139,"value":281},{"type":130,"tag":249,"props":2304,"children":2305},{"style":284},[2306],{"type":139,"value":2307},"200",{"type":130,"tag":249,"props":2309,"children":2310},{"style":256},[2311],{"type":139,"value":281},{"type":130,"tag":249,"props":2313,"children":2314},{"style":268},[2315],{"type":139,"value":2316}," height",{"type":130,"tag":249,"props":2318,"children":2319},{"style":256},[2320],{"type":139,"value":276},{"type":130,"tag":249,"props":2322,"children":2323},{"style":256},[2324],{"type":139,"value":281},{"type":130,"tag":249,"props":2326,"children":2327},{"style":284},[2328],{"type":139,"value":2329},"100",{"type":130,"tag":249,"props":2331,"children":2332},{"style":256},[2333],{"type":139,"value":281},{"type":130,"tag":249,"props":2335,"children":2336},{"style":256},[2337],{"type":139,"value":296},{"type":130,"tag":381,"props":2339,"children":2341},{"id":2340},"fit",[2342],{"type":130,"tag":135,"props":2343,"children":2344},{"className":118},[2345],{"type":139,"value":2340},{"type":130,"tag":131,"props":2347,"children":2348},{},[2349,2351,2355],{"type":139,"value":2350},"The ",{"type":130,"tag":135,"props":2352,"children":2353},{"className":118},[2354],{"type":139,"value":2340},{"type":139,"value":2356}," property specifies the size of the images.\nThere are five standard values you can use with this property.",{"type":130,"tag":150,"props":2358,"children":2359},{},[2360,2369,2379,2389,2399],{"type":130,"tag":154,"props":2361,"children":2362},{},[2363,2367],{"type":130,"tag":135,"props":2364,"children":2365},{"className":118},[2366],{"type":139,"value":1810},{"type":139,"value":2368},": (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit",{"type":130,"tag":154,"props":2370,"children":2371},{},[2372,2377],{"type":130,"tag":135,"props":2373,"children":2374},{"className":118},[2375],{"type":139,"value":2376},"contain",{"type":139,"value":2378},": Preserving aspect ratio, contain within both provided dimensions using \"letterboxing\" where necessary.",{"type":130,"tag":154,"props":2380,"children":2381},{},[2382,2387],{"type":130,"tag":135,"props":2383,"children":2384},{"className":118},[2385],{"type":139,"value":2386},"fill",{"type":139,"value":2388},": Ignore the aspect ratio of the input and stretch to both provided dimensions.",{"type":130,"tag":154,"props":2390,"children":2391},{},[2392,2397],{"type":130,"tag":135,"props":2393,"children":2394},{"className":118},[2395],{"type":139,"value":2396},"inside",{"type":139,"value":2398},": 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":130,"tag":154,"props":2400,"children":2401},{},[2402,2407],{"type":130,"tag":135,"props":2403,"children":2404},{"className":118},[2405],{"type":139,"value":2406},"outside",{"type":139,"value":2408},": 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":130,"tag":239,"props":2410,"children":2412},{"className":241,"code":2411,"language":243,"meta":118,"style":118},"\u003CNuxtImg fit=\"cover\" src=\"/nuxt-icon.png\" width=\"200\" height=\"100\" />\n",[2413],{"type":130,"tag":135,"props":2414,"children":2415},{"__ignoreMap":118},[2416],{"type":130,"tag":249,"props":2417,"children":2418},{"class":251,"line":252},[2419,2423,2427,2432,2436,2440,2444,2448,2452,2456,2460,2464,2468,2472,2476,2480,2484,2488,2492,2496,2500,2504,2508],{"type":130,"tag":249,"props":2420,"children":2421},{"style":256},[2422],{"type":139,"value":259},{"type":130,"tag":249,"props":2424,"children":2425},{"style":262},[2426],{"type":139,"value":265},{"type":130,"tag":249,"props":2428,"children":2429},{"style":268},[2430],{"type":139,"value":2431}," fit",{"type":130,"tag":249,"props":2433,"children":2434},{"style":256},[2435],{"type":139,"value":276},{"type":130,"tag":249,"props":2437,"children":2438},{"style":256},[2439],{"type":139,"value":281},{"type":130,"tag":249,"props":2441,"children":2442},{"style":284},[2443],{"type":139,"value":1810},{"type":130,"tag":249,"props":2445,"children":2446},{"style":256},[2447],{"type":139,"value":281},{"type":130,"tag":249,"props":2449,"children":2450},{"style":268},[2451],{"type":139,"value":271},{"type":130,"tag":249,"props":2453,"children":2454},{"style":256},[2455],{"type":139,"value":276},{"type":130,"tag":249,"props":2457,"children":2458},{"style":256},[2459],{"type":139,"value":281},{"type":130,"tag":249,"props":2461,"children":2462},{"style":284},[2463],{"type":139,"value":287},{"type":130,"tag":249,"props":2465,"children":2466},{"style":256},[2467],{"type":139,"value":281},{"type":130,"tag":249,"props":2469,"children":2470},{"style":268},[2471],{"type":139,"value":2294},{"type":130,"tag":249,"props":2473,"children":2474},{"style":256},[2475],{"type":139,"value":276},{"type":130,"tag":249,"props":2477,"children":2478},{"style":256},[2479],{"type":139,"value":281},{"type":130,"tag":249,"props":2481,"children":2482},{"style":284},[2483],{"type":139,"value":2307},{"type":130,"tag":249,"props":2485,"children":2486},{"style":256},[2487],{"type":139,"value":281},{"type":130,"tag":249,"props":2489,"children":2490},{"style":268},[2491],{"type":139,"value":2316},{"type":130,"tag":249,"props":2493,"children":2494},{"style":256},[2495],{"type":139,"value":276},{"type":130,"tag":249,"props":2497,"children":2498},{"style":256},[2499],{"type":139,"value":281},{"type":130,"tag":249,"props":2501,"children":2502},{"style":284},[2503],{"type":139,"value":2329},{"type":130,"tag":249,"props":2505,"children":2506},{"style":256},[2507],{"type":139,"value":281},{"type":130,"tag":249,"props":2509,"children":2510},{"style":256},[2511],{"type":139,"value":296},{"type":130,"tag":345,"props":2513,"children":2514},{},[2515],{"type":130,"tag":131,"props":2516,"children":2517},{},[2518],{"type":139,"value":2519},"Some providers support other values.",{"type":130,"tag":381,"props":2521,"children":2523},{"id":2522},"modifiers",[2524],{"type":130,"tag":135,"props":2525,"children":2526},{"className":118},[2527],{"type":139,"value":2522},{"type":130,"tag":131,"props":2529,"children":2530},{},[2531],{"type":139,"value":2532},"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":130,"tag":131,"props":2534,"children":2535},{},[2536,2538,2542],{"type":139,"value":2537},"Using the ",{"type":130,"tag":135,"props":2539,"children":2540},{"className":118},[2541],{"type":139,"value":2522},{"type":139,"value":2543}," prop lets you use any of these transformations.",{"type":130,"tag":131,"props":2545,"children":2546},{},[2547],{"type":130,"tag":612,"props":2548,"children":2549},{},[2550],{"type":139,"value":616},{"type":130,"tag":239,"props":2552,"children":2554},{"className":241,"code":2553,"language":243,"meta":118,"style":118},"\u003CNuxtImg\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",[2555],{"type":130,"tag":135,"props":2556,"children":2557},{"__ignoreMap":118},[2558,2569,2593,2616,2640,2663,2688],{"type":130,"tag":249,"props":2559,"children":2560},{"class":251,"line":252},[2561,2565],{"type":130,"tag":249,"props":2562,"children":2563},{"style":256},[2564],{"type":139,"value":259},{"type":130,"tag":249,"props":2566,"children":2567},{"style":262},[2568],{"type":139,"value":265},{"type":130,"tag":249,"props":2570,"children":2571},{"class":251,"line":637},[2572,2577,2581,2585,2589],{"type":130,"tag":249,"props":2573,"children":2574},{"style":268},[2575],{"type":139,"value":2576},"  provider",{"type":130,"tag":249,"props":2578,"children":2579},{"style":256},[2580],{"type":139,"value":276},{"type":130,"tag":249,"props":2582,"children":2583},{"style":256},[2584],{"type":139,"value":281},{"type":130,"tag":249,"props":2586,"children":2587},{"style":284},[2588],{"type":139,"value":1488},{"type":130,"tag":249,"props":2590,"children":2591},{"style":256},[2592],{"type":139,"value":281},{"type":130,"tag":249,"props":2594,"children":2595},{"class":251,"line":663},[2596,2600,2604,2608,2612],{"type":130,"tag":249,"props":2597,"children":2598},{"style":268},[2599],{"type":139,"value":643},{"type":130,"tag":249,"props":2601,"children":2602},{"style":256},[2603],{"type":139,"value":276},{"type":130,"tag":249,"props":2605,"children":2606},{"style":256},[2607],{"type":139,"value":281},{"type":130,"tag":249,"props":2609,"children":2610},{"style":284},[2611],{"type":139,"value":1513},{"type":130,"tag":249,"props":2613,"children":2614},{"style":256},[2615],{"type":139,"value":281},{"type":130,"tag":249,"props":2617,"children":2618},{"class":251,"line":689},[2619,2624,2628,2632,2636],{"type":130,"tag":249,"props":2620,"children":2621},{"style":268},[2622],{"type":139,"value":2623},"  width",{"type":130,"tag":249,"props":2625,"children":2626},{"style":256},[2627],{"type":139,"value":276},{"type":130,"tag":249,"props":2629,"children":2630},{"style":256},[2631],{"type":139,"value":281},{"type":130,"tag":249,"props":2633,"children":2634},{"style":284},[2635],{"type":139,"value":1538},{"type":130,"tag":249,"props":2637,"children":2638},{"style":256},[2639],{"type":139,"value":281},{"type":130,"tag":249,"props":2641,"children":2642},{"class":251,"line":809},[2643,2647,2651,2655,2659],{"type":130,"tag":249,"props":2644,"children":2645},{"style":268},[2646],{"type":139,"value":764},{"type":130,"tag":249,"props":2648,"children":2649},{"style":256},[2650],{"type":139,"value":276},{"type":130,"tag":249,"props":2652,"children":2653},{"style":256},[2654],{"type":139,"value":281},{"type":130,"tag":249,"props":2656,"children":2657},{"style":284},[2658],{"type":139,"value":1563},{"type":130,"tag":249,"props":2660,"children":2661},{"style":256},[2662],{"type":139,"value":281},{"type":130,"tag":249,"props":2664,"children":2665},{"class":251,"line":817},[2666,2671,2675,2679,2684],{"type":130,"tag":249,"props":2667,"children":2668},{"style":268},[2669],{"type":139,"value":2670},"  :modifiers",{"type":130,"tag":249,"props":2672,"children":2673},{"style":256},[2674],{"type":139,"value":276},{"type":130,"tag":249,"props":2676,"children":2677},{"style":256},[2678],{"type":139,"value":281},{"type":130,"tag":249,"props":2680,"children":2681},{"style":284},[2682],{"type":139,"value":2683},"{ roundCorner: '0:100' }",{"type":130,"tag":249,"props":2685,"children":2686},{"style":256},[2687],{"type":139,"value":281},{"type":130,"tag":249,"props":2689,"children":2690},{"class":251,"line":827},[2691],{"type":130,"tag":249,"props":2692,"children":2693},{"style":256},[2694],{"type":139,"value":695},{"type":130,"tag":381,"props":2696,"children":2698},{"id":2697},"preload",[2699],{"type":130,"tag":135,"props":2700,"children":2701},{"className":118},[2702],{"type":139,"value":2697},{"type":130,"tag":131,"props":2704,"children":2705},{},[2706,2708,2713],{"type":139,"value":2707},"In case you want to preload the image, use this prop. This will place a corresponding ",{"type":130,"tag":135,"props":2709,"children":2710},{"className":118},[2711],{"type":139,"value":2712},"link",{"type":139,"value":2714}," tag in the page's head.",{"type":130,"tag":239,"props":2716,"children":2718},{"className":241,"code":2717,"language":243,"meta":118,"style":118},"\u003CNuxtImg preload src=\"/nuxt-icon.png\" />\n",[2719],{"type":130,"tag":135,"props":2720,"children":2721},{"__ignoreMap":118},[2722],{"type":130,"tag":249,"props":2723,"children":2724},{"class":251,"line":252},[2725,2729,2733,2738,2742,2746,2750,2754,2758],{"type":130,"tag":249,"props":2726,"children":2727},{"style":256},[2728],{"type":139,"value":259},{"type":130,"tag":249,"props":2730,"children":2731},{"style":262},[2732],{"type":139,"value":265},{"type":130,"tag":249,"props":2734,"children":2735},{"style":268},[2736],{"type":139,"value":2737}," preload",{"type":130,"tag":249,"props":2739,"children":2740},{"style":268},[2741],{"type":139,"value":271},{"type":130,"tag":249,"props":2743,"children":2744},{"style":256},[2745],{"type":139,"value":276},{"type":130,"tag":249,"props":2747,"children":2748},{"style":256},[2749],{"type":139,"value":281},{"type":130,"tag":249,"props":2751,"children":2752},{"style":284},[2753],{"type":139,"value":287},{"type":130,"tag":249,"props":2755,"children":2756},{"style":256},[2757],{"type":139,"value":281},{"type":130,"tag":249,"props":2759,"children":2760},{"style":256},[2761],{"type":139,"value":296},{"type":130,"tag":381,"props":2763,"children":2765},{"id":2764},"loading",[2766],{"type":130,"tag":135,"props":2767,"children":2768},{"className":118},[2769],{"type":139,"value":2764},{"type":130,"tag":131,"props":2771,"children":2772},{},[2773,2775,2783,2785,2792],{"type":139,"value":2774},"This is a ",{"type":130,"tag":354,"props":2776,"children":2780},{"href":2777,"rel":2778},"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading",[2779],"nofollow",[2781],{"type":139,"value":2782},"native",{"type":139,"value":2784}," 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":130,"tag":354,"props":2786,"children":2789},{"href":2787,"rel":2788},"https://caniuse.com/loading-lazy-attr",[2779],[2790],{"type":139,"value":2791},"supported",{"type":139,"value":2793}," by the latest version of all major browsers since March 2022.",{"type":130,"tag":131,"props":2795,"children":2796},{},[2797,2799,2804],{"type":139,"value":2798},"Set ",{"type":130,"tag":135,"props":2800,"children":2801},{"className":118},[2802],{"type":139,"value":2803},"loading=\"lazy\"",{"type":139,"value":2805}," to defer loading of an image until it appears in the viewport.",{"type":130,"tag":239,"props":2807,"children":2809},{"className":241,"code":2808,"language":243,"meta":118,"style":118},"\u003CNuxtImg src=\"/nuxt-icon.png\" loading=\"lazy\" />\n",[2810],{"type":130,"tag":135,"props":2811,"children":2812},{"__ignoreMap":118},[2813],{"type":130,"tag":249,"props":2814,"children":2815},{"class":251,"line":252},[2816,2820,2824,2828,2832,2836,2840,2844,2849,2853,2857,2862,2866],{"type":130,"tag":249,"props":2817,"children":2818},{"style":256},[2819],{"type":139,"value":259},{"type":130,"tag":249,"props":2821,"children":2822},{"style":262},[2823],{"type":139,"value":265},{"type":130,"tag":249,"props":2825,"children":2826},{"style":268},[2827],{"type":139,"value":271},{"type":130,"tag":249,"props":2829,"children":2830},{"style":256},[2831],{"type":139,"value":276},{"type":130,"tag":249,"props":2833,"children":2834},{"style":256},[2835],{"type":139,"value":281},{"type":130,"tag":249,"props":2837,"children":2838},{"style":284},[2839],{"type":139,"value":287},{"type":130,"tag":249,"props":2841,"children":2842},{"style":256},[2843],{"type":139,"value":281},{"type":130,"tag":249,"props":2845,"children":2846},{"style":268},[2847],{"type":139,"value":2848}," loading",{"type":130,"tag":249,"props":2850,"children":2851},{"style":256},[2852],{"type":139,"value":276},{"type":130,"tag":249,"props":2854,"children":2855},{"style":256},[2856],{"type":139,"value":281},{"type":130,"tag":249,"props":2858,"children":2859},{"style":284},[2860],{"type":139,"value":2861},"lazy",{"type":130,"tag":249,"props":2863,"children":2864},{"style":256},[2865],{"type":139,"value":281},{"type":130,"tag":249,"props":2867,"children":2868},{"style":256},[2869],{"type":139,"value":296},{"type":130,"tag":381,"props":2871,"children":2873},{"id":2872},"nonce",[2874],{"type":130,"tag":135,"props":2875,"children":2876},{"className":118},[2877],{"type":139,"value":2872},{"type":130,"tag":131,"props":2879,"children":2880},{},[2881,2882,2888,2890,2895,2897,2902],{"type":139,"value":2774},{"type":130,"tag":354,"props":2883,"children":2886},{"href":2884,"rel":2885},"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce",[2779],[2887],{"type":139,"value":2782},{"type":139,"value":2889}," global attribute that defines a cryptographic nonce (number used once) that can be used by Content Security Policy to determine whether or not a given fetch will be allowed to proceed for a given element.\nProviding a nonce allows you to avoid using the CSP ",{"type":130,"tag":135,"props":2891,"children":2892},{"className":118},[2893],{"type":139,"value":2894},"unsafe-inline",{"type":139,"value":2896}," directive, which would allowlist ",{"type":130,"tag":553,"props":2898,"children":2899},{},[2900],{"type":139,"value":2901},"all",{"type":139,"value":2903}," inline script or styles.",{"type":130,"tag":239,"props":2905,"children":2907},{"className":241,"code":2906,"language":243,"meta":118,"style":118},"\u003CNuxtImg src=\"/nuxt-icon.png\" :nonce=\"nonce\" />\n\n\u003Cscript lang=\"ts\" setup>\n// useNonce is not provided by nuxt/image but might be\n// provided by another module, for example nuxt-security\nconst nonce = useNonce()\n\u003C/script>\n",[2908],{"type":130,"tag":135,"props":2909,"children":2910},{"__ignoreMap":118},[2911,2967,2970,3010,3018,3026,3051],{"type":130,"tag":249,"props":2912,"children":2913},{"class":251,"line":252},[2914,2918,2922,2926,2930,2934,2938,2942,2947,2951,2955,2959,2963],{"type":130,"tag":249,"props":2915,"children":2916},{"style":256},[2917],{"type":139,"value":259},{"type":130,"tag":249,"props":2919,"children":2920},{"style":262},[2921],{"type":139,"value":265},{"type":130,"tag":249,"props":2923,"children":2924},{"style":268},[2925],{"type":139,"value":271},{"type":130,"tag":249,"props":2927,"children":2928},{"style":256},[2929],{"type":139,"value":276},{"type":130,"tag":249,"props":2931,"children":2932},{"style":256},[2933],{"type":139,"value":281},{"type":130,"tag":249,"props":2935,"children":2936},{"style":284},[2937],{"type":139,"value":287},{"type":130,"tag":249,"props":2939,"children":2940},{"style":256},[2941],{"type":139,"value":281},{"type":130,"tag":249,"props":2943,"children":2944},{"style":268},[2945],{"type":139,"value":2946}," :nonce",{"type":130,"tag":249,"props":2948,"children":2949},{"style":256},[2950],{"type":139,"value":276},{"type":130,"tag":249,"props":2952,"children":2953},{"style":256},[2954],{"type":139,"value":281},{"type":130,"tag":249,"props":2956,"children":2957},{"style":284},[2958],{"type":139,"value":2872},{"type":130,"tag":249,"props":2960,"children":2961},{"style":256},[2962],{"type":139,"value":281},{"type":130,"tag":249,"props":2964,"children":2965},{"style":256},[2966],{"type":139,"value":296},{"type":130,"tag":249,"props":2968,"children":2969},{"class":251,"line":637},[],{"type":130,"tag":249,"props":2971,"children":2972},{"class":251,"line":663},[2973,2977,2981,2986,2990,2994,2998,3002,3006],{"type":130,"tag":249,"props":2974,"children":2975},{"style":256},[2976],{"type":139,"value":259},{"type":130,"tag":249,"props":2978,"children":2979},{"style":262},[2980],{"type":139,"value":1249},{"type":130,"tag":249,"props":2982,"children":2983},{"style":268},[2984],{"type":139,"value":2985}," lang",{"type":130,"tag":249,"props":2987,"children":2988},{"style":256},[2989],{"type":139,"value":276},{"type":130,"tag":249,"props":2991,"children":2992},{"style":256},[2993],{"type":139,"value":281},{"type":130,"tag":249,"props":2995,"children":2996},{"style":284},[2997],{"type":139,"value":1596},{"type":130,"tag":249,"props":2999,"children":3000},{"style":256},[3001],{"type":139,"value":281},{"type":130,"tag":249,"props":3003,"children":3004},{"style":268},[3005],{"type":139,"value":1254},{"type":130,"tag":249,"props":3007,"children":3008},{"style":256},[3009],{"type":139,"value":1259},{"type":130,"tag":249,"props":3011,"children":3012},{"class":251,"line":689},[3013],{"type":130,"tag":249,"props":3014,"children":3015},{"style":821},[3016],{"type":139,"value":3017},"// useNonce is not provided by nuxt/image but might be",{"type":130,"tag":249,"props":3019,"children":3020},{"class":251,"line":809},[3021],{"type":130,"tag":249,"props":3022,"children":3023},{"style":821},[3024],{"type":139,"value":3025},"// provided by another module, for example nuxt-security",{"type":130,"tag":249,"props":3027,"children":3028},{"class":251,"line":817},[3029,3033,3038,3042,3047],{"type":130,"tag":249,"props":3030,"children":3031},{"style":268},[3032],{"type":139,"value":1267},{"type":130,"tag":249,"props":3034,"children":3035},{"style":1270},[3036],{"type":139,"value":3037}," nonce ",{"type":130,"tag":249,"props":3039,"children":3040},{"style":256},[3041],{"type":139,"value":276},{"type":130,"tag":249,"props":3043,"children":3044},{"style":1280},[3045],{"type":139,"value":3046}," useNonce",{"type":130,"tag":249,"props":3048,"children":3049},{"style":1270},[3050],{"type":139,"value":1288},{"type":130,"tag":249,"props":3052,"children":3053},{"class":251,"line":827},[3054,3058,3062],{"type":130,"tag":249,"props":3055,"children":3056},{"style":256},[3057],{"type":139,"value":1296},{"type":130,"tag":249,"props":3059,"children":3060},{"style":262},[3061],{"type":139,"value":1249},{"type":130,"tag":249,"props":3063,"children":3064},{"style":256},[3065],{"type":139,"value":1259},{"type":130,"tag":212,"props":3067,"children":3069},{"id":3068},"events",[3070],{"type":139,"value":3071},"Events",{"type":130,"tag":131,"props":3073,"children":3074},{},[3075,3077,3081,3083,3087,3088,3092],{"type":139,"value":3076},"Native events emitted by the ",{"type":130,"tag":135,"props":3078,"children":3079},{"className":118},[3080],{"type":139,"value":146},{"type":139,"value":3082}," element contained by ",{"type":130,"tag":135,"props":3084,"children":3085},{"className":118},[3086],{"type":139,"value":25},{"type":139,"value":182},{"type":130,"tag":135,"props":3089,"children":3090},{"className":118},[3091],{"type":139,"value":28},{"type":139,"value":3093}," components are re-emitted and can be listened to.",{"type":130,"tag":131,"props":3095,"children":3096},{},[3097,3101,3103,3108,3110],{"type":130,"tag":612,"props":3098,"children":3099},{},[3100],{"type":139,"value":616},{"type":139,"value":3102}," Listen to the native ",{"type":130,"tag":135,"props":3104,"children":3105},{"className":118},[3106],{"type":139,"value":3107},"onLoad",{"type":139,"value":3109}," event from ",{"type":130,"tag":135,"props":3111,"children":3112},{"className":118},[3113],{"type":139,"value":25},{"type":130,"tag":239,"props":3115,"children":3117},{"className":241,"code":3116,"language":243,"meta":118,"style":118},"\u003CNuxtImg\n  src=\"/images/colors.jpg\"\n  width=\"500\"\n  height=\"500\"\n  @load=\"doSomethingOnLoad\"\n/>\n",[3118],{"type":130,"tag":135,"props":3119,"children":3120},{"__ignoreMap":118},[3121,3132,3156,3180,3203,3228],{"type":130,"tag":249,"props":3122,"children":3123},{"class":251,"line":252},[3124,3128],{"type":130,"tag":249,"props":3125,"children":3126},{"style":256},[3127],{"type":139,"value":259},{"type":130,"tag":249,"props":3129,"children":3130},{"style":262},[3131],{"type":139,"value":265},{"type":130,"tag":249,"props":3133,"children":3134},{"class":251,"line":637},[3135,3139,3143,3147,3152],{"type":130,"tag":249,"props":3136,"children":3137},{"style":268},[3138],{"type":139,"value":643},{"type":130,"tag":249,"props":3140,"children":3141},{"style":256},[3142],{"type":139,"value":276},{"type":130,"tag":249,"props":3144,"children":3145},{"style":256},[3146],{"type":139,"value":281},{"type":130,"tag":249,"props":3148,"children":3149},{"style":284},[3150],{"type":139,"value":3151},"/images/colors.jpg",{"type":130,"tag":249,"props":3153,"children":3154},{"style":256},[3155],{"type":139,"value":281},{"type":130,"tag":249,"props":3157,"children":3158},{"class":251,"line":663},[3159,3163,3167,3171,3176],{"type":130,"tag":249,"props":3160,"children":3161},{"style":268},[3162],{"type":139,"value":2623},{"type":130,"tag":249,"props":3164,"children":3165},{"style":256},[3166],{"type":139,"value":276},{"type":130,"tag":249,"props":3168,"children":3169},{"style":256},[3170],{"type":139,"value":281},{"type":130,"tag":249,"props":3172,"children":3173},{"style":284},[3174],{"type":139,"value":3175},"500",{"type":130,"tag":249,"props":3177,"children":3178},{"style":256},[3179],{"type":139,"value":281},{"type":130,"tag":249,"props":3181,"children":3182},{"class":251,"line":689},[3183,3187,3191,3195,3199],{"type":130,"tag":249,"props":3184,"children":3185},{"style":268},[3186],{"type":139,"value":764},{"type":130,"tag":249,"props":3188,"children":3189},{"style":256},[3190],{"type":139,"value":276},{"type":130,"tag":249,"props":3192,"children":3193},{"style":256},[3194],{"type":139,"value":281},{"type":130,"tag":249,"props":3196,"children":3197},{"style":284},[3198],{"type":139,"value":3175},{"type":130,"tag":249,"props":3200,"children":3201},{"style":256},[3202],{"type":139,"value":281},{"type":130,"tag":249,"props":3204,"children":3205},{"class":251,"line":809},[3206,3211,3215,3219,3224],{"type":130,"tag":249,"props":3207,"children":3208},{"style":268},[3209],{"type":139,"value":3210},"  @load",{"type":130,"tag":249,"props":3212,"children":3213},{"style":256},[3214],{"type":139,"value":276},{"type":130,"tag":249,"props":3216,"children":3217},{"style":256},[3218],{"type":139,"value":281},{"type":130,"tag":249,"props":3220,"children":3221},{"style":284},[3222],{"type":139,"value":3223},"doSomethingOnLoad",{"type":130,"tag":249,"props":3225,"children":3226},{"style":256},[3227],{"type":139,"value":281},{"type":130,"tag":249,"props":3229,"children":3230},{"class":251,"line":817},[3231],{"type":130,"tag":249,"props":3232,"children":3233},{"style":256},[3234],{"type":139,"value":695},{"type":130,"tag":3236,"props":3237,"children":3238},"style",{},[3239],{"type":139,"value":3240},"html.dark .shiki span {color: var(--shiki-dark) !important;background: var(--shiki-dark-bg) !important;font-style: var(--shiki-dark-font-style) !important;font-weight: var(--shiki-dark-font-weight) !important;text-decoration: var(--shiki-dark-text-decoration) !important;}html.light .shiki span {color: var(--shiki-light) !important;background: var(--shiki-light-bg) !important;font-style: var(--shiki-light-font-style) !important;font-weight: var(--shiki-light-font-weight) !important;text-decoration: var(--shiki-light-text-decoration) !important;}",{"title":118,"searchDepth":637,"depth":637,"links":3242},[3243,3244,3261],{"id":116,"depth":637,"text":21},{"id":376,"depth":637,"text":379,"children":3245},[3246,3247,3249,3250,3251,3252,3253,3254,3255,3256,3257,3258,3259,3260],{"id":168,"depth":663,"text":168},{"id":482,"depth":663,"text":3248},"width / height",{"id":197,"depth":663,"text":197},{"id":698,"depth":663,"text":698},{"id":871,"depth":663,"text":871},{"id":1399,"depth":663,"text":1399},{"id":1726,"depth":663,"text":1726},{"id":2089,"depth":663,"text":2089},{"id":2218,"depth":663,"text":2218},{"id":2340,"depth":663,"text":2340},{"id":2522,"depth":663,"text":2522},{"id":2697,"depth":663,"text":2697},{"id":2764,"depth":663,"text":2764},{"id":2872,"depth":663,"text":2872},{"id":3068,"depth":637,"text":3071},"markdown","content:2.usage:1.nuxt-img.md","content","2.usage/1.nuxt-img.md",[3267,3483],{"_path":19,"_dir":3268,"_draft":117,"_partial":117,"_locale":118,"title":18,"description":3269,"body":3270,"_type":3262,"_id":3481,"_source":3264,"_file":3482,"_extension":605},"get-started","We can never thank you enough for your contributions. ❤️",{"type":127,"children":3271,"toc":3475},[3272,3289,3295,3344,3350,3422,3428],{"type":130,"tag":345,"props":3273,"children":3274},{},[3275],{"type":130,"tag":131,"props":3276,"children":3277},{},[3278,3280,3287],{"type":139,"value":3279},"It is highly recommended to read ",{"type":130,"tag":354,"props":3281,"children":3284},{"href":3282,"rel":3283},"https://nuxt.com/docs/community/contribution",[2779],[3285],{"type":139,"value":3286},"Nuxt contribution guide",{"type":139,"value":3288}," before making any contributions.",{"type":130,"tag":212,"props":3290,"children":3292},{"id":3291},"how-to-contribute",[3293],{"type":139,"value":3294},"How to contribute?",{"type":130,"tag":150,"props":3296,"children":3297},{},[3298,3312,3322,3332],{"type":130,"tag":154,"props":3299,"children":3300},{},[3301,3303,3310],{"type":139,"value":3302},"Clone ",{"type":130,"tag":354,"props":3304,"children":3307},{"href":3305,"rel":3306},"https://github.com/nuxt/image",[2779],[3308],{"type":139,"value":3309},"nuxt/image",{"type":139,"value":3311}," repository",{"type":130,"tag":154,"props":3313,"children":3314},{},[3315,3317],{"type":139,"value":3316},"Enable Corepack using ",{"type":130,"tag":135,"props":3318,"children":3319},{"className":118},[3320],{"type":139,"value":3321},"corepack enable",{"type":130,"tag":154,"props":3323,"children":3324},{},[3325,3327],{"type":139,"value":3326},"Install dependencies using ",{"type":130,"tag":135,"props":3328,"children":3329},{"className":118},[3330],{"type":139,"value":3331},"pnpm install",{"type":130,"tag":154,"props":3333,"children":3334},{},[3335,3337,3342],{"type":139,"value":3336},"Run ",{"type":130,"tag":135,"props":3338,"children":3339},{"className":118},[3340],{"type":139,"value":3341},"pnpm dev:prepare",{"type":139,"value":3343}," to generate type stubs.",{"type":130,"tag":381,"props":3345,"children":3347},{"id":3346},"nuxt-image",[3348],{"type":139,"value":3349},"Nuxt Image",{"type":130,"tag":150,"props":3351,"children":3352},{},[3353,3374,3379,3400,3410],{"type":130,"tag":154,"props":3354,"children":3355},{},[3356,3358,3363,3365,3372],{"type":139,"value":3357},"Use ",{"type":130,"tag":135,"props":3359,"children":3360},{"className":118},[3361],{"type":139,"value":3362},"pnpm dev",{"type":139,"value":3364}," to start the ",{"type":130,"tag":354,"props":3366,"children":3369},{"href":3367,"rel":3368},"https://github.com/nuxt/image/tree/main/playground",[2779],[3370],{"type":139,"value":3371},"playground",{"type":139,"value":3373}," in development mode.",{"type":130,"tag":154,"props":3375,"children":3376},{},[3377],{"type":139,"value":3378},"Apply your changes",{"type":130,"tag":154,"props":3380,"children":3381},{},[3382,3384,3391,3393,3398],{"type":139,"value":3383},"Add tests into the ",{"type":130,"tag":354,"props":3385,"children":3388},{"href":3386,"rel":3387},"https://github.com/nuxt/image/tree/main/test",[2779],[3389],{"type":139,"value":3390},"test/",{"type":139,"value":3392}," directory and run ",{"type":130,"tag":135,"props":3394,"children":3395},{"className":118},[3396],{"type":139,"value":3397},"pnpm test",{"type":139,"value":3399}," to make sure they pass.",{"type":130,"tag":154,"props":3401,"children":3402},{},[3403,3405],{"type":139,"value":3404},"Check the code style with ",{"type":130,"tag":135,"props":3406,"children":3407},{"className":118},[3408],{"type":139,"value":3409},"pnpm lint",{"type":130,"tag":154,"props":3411,"children":3412},{},[3413,3415,3420],{"type":139,"value":3414},"Before creating a PR, make sure to run ",{"type":130,"tag":135,"props":3416,"children":3417},{"className":118},[3418],{"type":139,"value":3419},"pnpm build",{"type":139,"value":3421}," and that no errors are reported.",{"type":130,"tag":381,"props":3423,"children":3425},{"id":3424},"documentation",[3426],{"type":139,"value":3427},"Documentation",{"type":130,"tag":150,"props":3429,"children":3430},{},[3431,3448,3461],{"type":130,"tag":154,"props":3432,"children":3433},{},[3434,3435,3440,3441,3447],{"type":139,"value":3357},{"type":130,"tag":135,"props":3436,"children":3437},{"className":118},[3438],{"type":139,"value":3439},"pnpm dev:docs",{"type":139,"value":3364},{"type":130,"tag":354,"props":3442,"children":3445},{"href":3443,"rel":3444},"https://github.com/nuxt/image/tree/main/docs",[2779],[3446],{"type":139,"value":3424},{"type":139,"value":3373},{"type":130,"tag":154,"props":3449,"children":3450},{},[3451,3453,3459],{"type":139,"value":3452},"Open ",{"type":130,"tag":354,"props":3454,"children":3457},{"href":3455,"rel":3456},"http://localhost:3000",[2779],[3458],{"type":139,"value":3455},{"type":139,"value":3460}," to view it in the browser.",{"type":130,"tag":154,"props":3462,"children":3463},{},[3464,3466,3473],{"type":139,"value":3465},"Update the content of the documentation in the ",{"type":130,"tag":354,"props":3467,"children":3470},{"href":3468,"rel":3469},"https://github.com/nuxt/image/tree/main/docs/content",[2779],[3471],{"type":139,"value":3472},"docs/content/",{"type":139,"value":3474}," directory.",{"title":118,"searchDepth":637,"depth":637,"links":3476},[3477],{"id":3291,"depth":637,"text":3294,"children":3478},[3479,3480],{"id":3346,"depth":663,"text":3349},{"id":3424,"depth":663,"text":3427},"content:1.get-started:4.contributing.md","1.get-started/4.contributing.md",{"_path":29,"_dir":116,"_draft":117,"_partial":117,"_locale":118,"title":28,"description":3484,"links":3485,"body":3488,"_type":3262,"_id":3847,"_source":3264,"_file":3848,"_extension":605},"Discover how to use and configure the Nuxt Picture component.",[3486],{"label":122,"icon":123,"to":3487,"size":125},"https://github.com/nuxt/image/blob/main/src/runtime/components/nuxt-picture.ts",{"type":127,"children":3489,"toc":3840},[3490,3504,3530,3548,3552,3568,3575,3580,3648,3682,3691,3696,3736,3745,3756,3763,3836],{"type":130,"tag":131,"props":3491,"children":3492},{},[3493,3497,3498,3503],{"type":130,"tag":135,"props":3494,"children":3495},{"className":118},[3496],{"type":139,"value":28},{"type":139,"value":141},{"type":130,"tag":135,"props":3499,"children":3500},{"className":118},[3501],{"type":139,"value":3502},"\u003Cpicture>",{"type":139,"value":148},{"type":130,"tag":131,"props":3505,"children":3506},{},[3507,3509,3513,3515,3522,3524,3528],{"type":139,"value":3508},"Usage of ",{"type":130,"tag":135,"props":3510,"children":3511},{"className":118},[3512],{"type":139,"value":28},{"type":139,"value":3514}," is almost identical to ",{"type":130,"tag":354,"props":3516,"children":3517},{"href":913},[3518],{"type":130,"tag":135,"props":3519,"children":3520},{"className":118},[3521],{"type":139,"value":25},{"type":139,"value":3523}," but also allows serving modern formats like ",{"type":130,"tag":135,"props":3525,"children":3526},{"className":118},[3527],{"type":139,"value":2135},{"type":139,"value":3529}," when possible.",{"type":130,"tag":131,"props":3531,"children":3532},{},[3533,3535,3546],{"type":139,"value":3534},"Learn more about the ",{"type":130,"tag":354,"props":3536,"children":3539},{"href":3537,"rel":3538},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[2779],[3540,3544],{"type":130,"tag":135,"props":3541,"children":3542},{"className":118},[3543],{"type":139,"value":3502},{"type":139,"value":3545}," tag on MDN",{"type":139,"value":3547},".",{"type":130,"tag":212,"props":3549,"children":3550},{"id":376},[3551],{"type":139,"value":379},{"type":130,"tag":345,"props":3553,"children":3554},{},[3555],{"type":130,"tag":131,"props":3556,"children":3557},{},[3558,3560],{"type":139,"value":3559},"See props supported by",{"type":130,"tag":354,"props":3561,"children":3563},{"href":3562},"/usage/nuxt-img#props",[3564],{"type":130,"tag":135,"props":3565,"children":3566},{"className":118},[3567],{"type":139,"value":25},{"type":130,"tag":381,"props":3569,"children":3570},{"id":2089},[3571],{"type":130,"tag":135,"props":3572,"children":3573},{"className":118},[3574],{"type":139,"value":2089},{"type":130,"tag":131,"props":3576,"children":3577},{},[3578],{"type":139,"value":3579},"Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.",{"type":130,"tag":239,"props":3581,"children":3583},{"className":241,"code":3582,"language":243,"meta":118,"style":118},"\u003CNuxtPicture format=\"avif,webp\" src=\"/nuxt-icon.png\" ... />\n",[3584],{"type":130,"tag":135,"props":3585,"children":3586},{"__ignoreMap":118},[3587],{"type":130,"tag":249,"props":3588,"children":3589},{"class":251,"line":252},[3590,3594,3599,3603,3607,3611,3616,3620,3624,3628,3632,3636,3640,3644],{"type":130,"tag":249,"props":3591,"children":3592},{"style":256},[3593],{"type":139,"value":259},{"type":130,"tag":249,"props":3595,"children":3596},{"style":262},[3597],{"type":139,"value":3598},"NuxtPicture",{"type":130,"tag":249,"props":3600,"children":3601},{"style":268},[3602],{"type":139,"value":2122},{"type":130,"tag":249,"props":3604,"children":3605},{"style":256},[3606],{"type":139,"value":276},{"type":130,"tag":249,"props":3608,"children":3609},{"style":256},[3610],{"type":139,"value":281},{"type":130,"tag":249,"props":3612,"children":3613},{"style":284},[3614],{"type":139,"value":3615},"avif,webp",{"type":130,"tag":249,"props":3617,"children":3618},{"style":256},[3619],{"type":139,"value":281},{"type":130,"tag":249,"props":3621,"children":3622},{"style":268},[3623],{"type":139,"value":271},{"type":130,"tag":249,"props":3625,"children":3626},{"style":256},[3627],{"type":139,"value":276},{"type":130,"tag":249,"props":3629,"children":3630},{"style":256},[3631],{"type":139,"value":281},{"type":130,"tag":249,"props":3633,"children":3634},{"style":284},[3635],{"type":139,"value":287},{"type":130,"tag":249,"props":3637,"children":3638},{"style":256},[3639],{"type":139,"value":281},{"type":130,"tag":249,"props":3641,"children":3642},{"style":268},[3643],{"type":139,"value":2164},{"type":130,"tag":249,"props":3645,"children":3646},{"style":256},[3647],{"type":139,"value":296},{"type":130,"tag":131,"props":3649,"children":3650},{},[3651,3652,3656,3657,3661,3662,3666,3667,3671,3672,3676,3677,3681],{"type":139,"value":2173},{"type":130,"tag":135,"props":3653,"children":3654},{"className":118},[3655],{"type":139,"value":2135},{"type":139,"value":2179},{"type":130,"tag":135,"props":3658,"children":3659},{"className":118},[3660],{"type":139,"value":2184},{"type":139,"value":2179},{"type":130,"tag":135,"props":3663,"children":3664},{"className":118},[3665],{"type":139,"value":2190},{"type":139,"value":2179},{"type":130,"tag":135,"props":3668,"children":3669},{"className":118},[3670],{"type":139,"value":1995},{"type":139,"value":2179},{"type":130,"tag":135,"props":3673,"children":3674},{"className":118},[3675],{"type":139,"value":2201},{"type":139,"value":182},{"type":130,"tag":135,"props":3678,"children":3679},{"className":118},[3680],{"type":139,"value":2207},{"type":139,"value":2215},{"type":130,"tag":381,"props":3683,"children":3685},{"id":3684},"legacyformat",[3686],{"type":130,"tag":135,"props":3687,"children":3688},{"className":118},[3689],{"type":139,"value":3690},"legacyFormat",{"type":130,"tag":131,"props":3692,"children":3693},{},[3694],{"type":139,"value":3695},"Format used for fallback. Default is conditional:",{"type":130,"tag":150,"props":3697,"children":3698},{},[3699,3726],{"type":130,"tag":154,"props":3700,"children":3701},{},[3702,3704,3708,3709,3713,3714,3718,3720,3724],{"type":139,"value":3703},"If original format supports transparency (",{"type":130,"tag":135,"props":3705,"children":3706},{"className":118},[3707],{"type":139,"value":2201},{"type":139,"value":2179},{"type":130,"tag":135,"props":3710,"children":3711},{"className":118},[3712],{"type":139,"value":2135},{"type":139,"value":182},{"type":130,"tag":135,"props":3715,"children":3716},{"className":118},[3717],{"type":139,"value":2207},{"type":139,"value":3719},"), ",{"type":130,"tag":135,"props":3721,"children":3722},{"className":118},[3723],{"type":139,"value":2201},{"type":139,"value":3725}," is used for fallback",{"type":130,"tag":154,"props":3727,"children":3728},{},[3729,3731,3735],{"type":139,"value":3730},"Otherwise ",{"type":130,"tag":135,"props":3732,"children":3733},{"className":118},[3734],{"type":139,"value":2190},{"type":139,"value":3725},{"type":130,"tag":381,"props":3737,"children":3739},{"id":3738},"imgattrs",[3740],{"type":130,"tag":135,"props":3741,"children":3742},{"className":118},[3743],{"type":139,"value":3744},"imgAttrs",{"type":130,"tag":131,"props":3746,"children":3747},{},[3748,3750,3754],{"type":139,"value":3749},"Allows you to set additional HTML-attributes on the ",{"type":130,"tag":135,"props":3751,"children":3752},{"className":118},[3753],{"type":139,"value":229},{"type":139,"value":3755}," element.",{"type":130,"tag":131,"props":3757,"children":3758},{},[3759],{"type":130,"tag":612,"props":3760,"children":3761},{},[3762],{"type":139,"value":616},{"type":130,"tag":239,"props":3764,"children":3766},{"className":241,"code":3765,"language":243,"meta":118,"style":118},"\u003CNuxtPicture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n",[3767],{"type":130,"tag":135,"props":3768,"children":3769},{"__ignoreMap":118},[3770,3781,3804,3829],{"type":130,"tag":249,"props":3771,"children":3772},{"class":251,"line":252},[3773,3777],{"type":130,"tag":249,"props":3774,"children":3775},{"style":256},[3776],{"type":139,"value":259},{"type":130,"tag":249,"props":3778,"children":3779},{"style":262},[3780],{"type":139,"value":3598},{"type":130,"tag":249,"props":3782,"children":3783},{"class":251,"line":637},[3784,3788,3792,3796,3800],{"type":130,"tag":249,"props":3785,"children":3786},{"style":268},[3787],{"type":139,"value":643},{"type":130,"tag":249,"props":3789,"children":3790},{"style":256},[3791],{"type":139,"value":276},{"type":130,"tag":249,"props":3793,"children":3794},{"style":256},[3795],{"type":139,"value":281},{"type":130,"tag":249,"props":3797,"children":3798},{"style":284},[3799],{"type":139,"value":287},{"type":130,"tag":249,"props":3801,"children":3802},{"style":256},[3803],{"type":139,"value":281},{"type":130,"tag":249,"props":3805,"children":3806},{"class":251,"line":663},[3807,3812,3816,3820,3825],{"type":130,"tag":249,"props":3808,"children":3809},{"style":268},[3810],{"type":139,"value":3811},"  :imgAttrs",{"type":130,"tag":249,"props":3813,"children":3814},{"style":256},[3815],{"type":139,"value":276},{"type":130,"tag":249,"props":3817,"children":3818},{"style":256},[3819],{"type":139,"value":281},{"type":130,"tag":249,"props":3821,"children":3822},{"style":284},[3823],{"type":139,"value":3824},"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}",{"type":130,"tag":249,"props":3826,"children":3827},{"style":256},[3828],{"type":139,"value":281},{"type":130,"tag":249,"props":3830,"children":3831},{"class":251,"line":689},[3832],{"type":130,"tag":249,"props":3833,"children":3834},{"style":256},[3835],{"type":139,"value":695},{"type":130,"tag":3236,"props":3837,"children":3838},{},[3839],{"type":139,"value":3240},{"title":118,"searchDepth":637,"depth":637,"links":3841},[3842],{"id":376,"depth":637,"text":379,"children":3843},[3844,3845,3846],{"id":2089,"depth":663,"text":2089},{"id":3684,"depth":663,"text":3690},{"id":3738,"depth":663,"text":3744},"content:2.usage:2.nuxt-picture.md","2.usage/2.nuxt-picture.md",1697713006401]