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