[{"data":1,"prerenderedAt":1037},["ShallowReactive",2],{"navigation_docs":3,"-usage-use-image":184,"-usage-use-image-surround":1032},[4,26,43,171],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Get Started","/get-started","1.get-started",[9,13,17,21],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Providers","/get-started/providers","1.get-started/3.providers",{"title":22,"path":23,"stem":24},"Contributing","/get-started/contributing","1.get-started/4.contributing",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Usage","/usage","2.usage",[31,35,39],{"title":32,"path":33,"stem":34},"\u003CNuxtImg>","/usage/nuxt-img","2.usage/1.nuxt-img",{"title":36,"path":37,"stem":38},"\u003CNuxtPicture>","/usage/nuxt-picture","2.usage/2.nuxt-picture",{"title":40,"path":41,"stem":42},"useImage()","/usage/use-image","2.usage/3.use-image",{"title":18,"path":44,"stem":45,"children":46,"page":25},"/providers","3.providers",[47,51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167],{"title":48,"path":49,"stem":50},"Aliyun","/providers/aliyun","3.providers/aliyun",{"title":52,"path":53,"stem":54},"AWS Amplify","/providers/aws-amplify","3.providers/aws-amplify",{"title":56,"path":57,"stem":58},"Bunny","/providers/bunny","3.providers/bunny",{"title":60,"path":61,"stem":62},"Caisy","/providers/caisy","3.providers/caisy",{"title":64,"path":65,"stem":66},"Cloudflare","/providers/cloudflare","3.providers/cloudflare",{"title":68,"path":69,"stem":70},"Cloudimage","/providers/cloudimage","3.providers/cloudimage",{"title":72,"path":73,"stem":74},"Cloudinary","/providers/cloudinary","3.providers/cloudinary",{"title":76,"path":77,"stem":78},"Contentful","/providers/contentful","3.providers/contentful",{"title":80,"path":81,"stem":82},"Directus","/providers/directus","3.providers/directus",{"title":84,"path":85,"stem":86},"Fastly","/providers/fastly","3.providers/fastly",{"title":88,"path":89,"stem":90},"Filerobot","/providers/filerobot","3.providers/filerobot",{"title":92,"path":93,"stem":94},"Glide","/providers/glide","3.providers/glide",{"title":96,"path":97,"stem":98},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":100,"path":101,"stem":102},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":104,"path":105,"stem":106},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":108,"path":109,"stem":110},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":112,"path":113,"stem":114},"Imgix","/providers/imgix","3.providers/imgix",{"title":116,"path":117,"stem":118},"IPX","/providers/ipx","3.providers/ipx",{"title":120,"path":121,"stem":122},"Netlify","/providers/netlify","3.providers/netlify",{"title":124,"path":125,"stem":126},"Prepr","/providers/prepr","3.providers/prepr",{"title":128,"path":129,"stem":130},"Prismic","/providers/prismic","3.providers/prismic",{"title":132,"path":133,"stem":134},"Sanity","/providers/sanity","3.providers/sanity",{"title":136,"path":137,"stem":138},"Shopify","/providers/shopify","3.providers/shopify",{"title":140,"path":141,"stem":142},"Sirv","/providers/sirv","3.providers/sirv",{"title":144,"path":145,"stem":146},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":148,"path":149,"stem":150},"Strapi","/providers/strapi","3.providers/strapi",{"title":152,"path":153,"stem":154},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":156,"path":157,"stem":158},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":160,"path":161,"stem":162},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":164,"path":165,"stem":166},"Vercel","/providers/vercel","3.providers/vercel",{"title":168,"path":169,"stem":170},"Weserv","/providers/weserv","3.providers/weserv",{"title":172,"path":173,"stem":174,"children":175,"page":25},"Advanced","/advanced","4.advanced",[176,180],{"title":177,"path":178,"stem":179},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":181,"path":182,"stem":183},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":185,"title":40,"body":186,"description":1021,"extension":1022,"links":1023,"meta":1029,"navigation":253,"path":41,"seo":1030,"stem":42,"__hash__":1031},"docs/2.usage/3.use-image.md",{"type":187,"value":188,"toc":1016},"minimark",[189,211,215,274,285,428,435,484,491,496,576,584,1012],[190,191,192,193,196,197,199,200,202,203,206,207,210],"p",{},"Sometimes you might need to use a generated image URL directly with applied transformations instead of the ",[194,195,32],"code",{}," and ",[194,198,36],{}," components. This is where ",[194,201,40],{}," comes in (and the helper function it returns, which you will often see referenced directly as ",[194,204,205],{},"$img"," or ",[194,208,209],{},"img",").",[212,213,27],"h2",{"id":214},"usage",[216,217,222],"pre",{"className":218,"code":219,"language":220,"meta":221,"style":221},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const img = useImage()\n\nimg(src, modifiers, options)\n","js","",[194,223,224,248,255],{"__ignoreMap":221},[225,226,229,233,237,241,245],"span",{"class":227,"line":228},"line",1,[225,230,232],{"class":231},"spNyl","const",[225,234,236],{"class":235},"sTEyZ"," img ",[225,238,240],{"class":239},"sMK4o","=",[225,242,244],{"class":243},"s2Zo4"," useImage",[225,246,247],{"class":235},"()\n",[225,249,251],{"class":227,"line":250},2,[225,252,254],{"emptyLinePlaceholder":253},true,"\n",[225,256,258,260,263,266,269,271],{"class":227,"line":257},3,[225,259,209],{"class":243},[225,261,262],{"class":235},"(src",[225,264,265],{"class":239},",",[225,267,268],{"class":235}," modifiers",[225,270,265],{"class":239},[225,272,273],{"class":235}," options)\n",[190,275,276,280,281,284],{},[277,278,279],"strong",{},"Example:"," Generate image URL for ",[194,282,283],{},"backgroundImage"," style.",[216,286,288],{"className":218,"code":287,"language":220,"meta":221,"style":221},"const img = useImage()\n\nconst backgroundStyles = computed(() => {\n  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })\n\n  return { backgroundImage: `url('${imgUrl}')` }\n})\n",[194,289,290,302,306,330,378,383,421],{"__ignoreMap":221},[225,291,292,294,296,298,300],{"class":227,"line":228},[225,293,232],{"class":231},[225,295,236],{"class":235},[225,297,240],{"class":239},[225,299,244],{"class":243},[225,301,247],{"class":235},[225,303,304],{"class":227,"line":250},[225,305,254],{"emptyLinePlaceholder":253},[225,307,308,310,313,315,318,321,324,327],{"class":227,"line":257},[225,309,232],{"class":231},[225,311,312],{"class":235}," backgroundStyles ",[225,314,240],{"class":239},[225,316,317],{"class":243}," computed",[225,319,320],{"class":235},"(",[225,322,323],{"class":239},"()",[225,325,326],{"class":231}," =>",[225,328,329],{"class":239}," {\n",[225,331,333,336,339,342,345,348,351,355,357,359,362,365,368,372,375],{"class":227,"line":332},4,[225,334,335],{"class":231},"  const",[225,337,338],{"class":235}," imgUrl",[225,340,341],{"class":239}," =",[225,343,344],{"class":243}," img",[225,346,320],{"class":347},"swJcz",[225,349,350],{"class":239},"'",[225,352,354],{"class":353},"sfazB","https://github.com/nuxt.png",[225,356,350],{"class":239},[225,358,265],{"class":239},[225,360,361],{"class":239}," {",[225,363,364],{"class":347}," width",[225,366,367],{"class":239},":",[225,369,371],{"class":370},"sbssI"," 100",[225,373,374],{"class":239}," }",[225,376,377],{"class":347},")\n",[225,379,381],{"class":227,"line":380},5,[225,382,254],{"emptyLinePlaceholder":253},[225,384,386,390,392,395,397,400,403,406,409,412,415,418],{"class":227,"line":385},6,[225,387,389],{"class":388},"s7zQu","  return",[225,391,361],{"class":239},[225,393,394],{"class":347}," backgroundImage",[225,396,367],{"class":239},[225,398,399],{"class":239}," `",[225,401,402],{"class":353},"url('",[225,404,405],{"class":239},"${",[225,407,408],{"class":235},"imgUrl",[225,410,411],{"class":239},"}",[225,413,414],{"class":353},"')",[225,416,417],{"class":239},"`",[225,419,420],{"class":239}," }\n",[225,422,424,426],{"class":227,"line":423},7,[225,425,411],{"class":239},[225,427,377],{"class":235},[429,430,432],"h3",{"id":431},"imggetsizes",[194,433,434],{},"img.getSizes",[216,436,438],{"className":218,"code":437,"language":220,"meta":221,"style":221},"const img = useImage()\n\nimg.getSizes(src, { sizes, modifiers })\n",[194,439,440,452,456],{"__ignoreMap":221},[225,441,442,444,446,448,450],{"class":227,"line":228},[225,443,232],{"class":231},[225,445,236],{"class":235},[225,447,240],{"class":239},[225,449,244],{"class":243},[225,451,247],{"class":235},[225,453,454],{"class":227,"line":250},[225,455,254],{"emptyLinePlaceholder":253},[225,457,458,460,463,466,468,470,472,475,477,480,482],{"class":227,"line":257},[225,459,209],{"class":235},[225,461,462],{"class":239},".",[225,464,465],{"class":243},"getSizes",[225,467,262],{"class":235},[225,469,265],{"class":239},[225,471,361],{"class":239},[225,473,474],{"class":235}," sizes",[225,476,265],{"class":239},[225,478,479],{"class":235}," modifiers ",[225,481,411],{"class":239},[225,483,377],{"class":235},[485,486,487,488,490],"warning",{},"Unstable: ",[194,489,465],{}," API might change or be removed.",[190,492,493],{},[277,494,495],{},"Parameters:",[497,498,499,506,512,547],"ul",{},[500,501,502,505],"li",{},[194,503,504],{},"src",": (string) Source to original image id",[500,507,508,511],{},[194,509,510],{},"sizes",": (string) List of responsive image sizes ({breakpoint}:{size}{unit})",[500,513,514,517,518],{},[194,515,516],{},"modifiers",": (object) Modifiers passed to provider for resizing and optimizing\n",[497,519,520,526,532,538,544],{},[500,521,522,525],{},[194,523,524],{},"width",": resize to the specified width (in pixels)",[500,527,528,531],{},[194,529,530],{},"height",": resize to specified height (in pixels)",[500,533,534,537],{},[194,535,536],{},"quality",": Change image quality (0 to 100)",[500,539,540,543],{},[194,541,542],{},"format",": Change the image format",[500,545,546],{},"(any other custom provider modifier)",[500,548,549,552,553],{},[194,550,551],{},"options",": (object)\n",[497,554,555,567],{},[500,556,557,560,561,566],{},[194,558,559],{},"provider",": (string) Provider name other than default (see ",[562,563,565],"a",{"href":564},"/get-started/configuration#providers","providers",")",[500,568,569,572,573],{},[194,570,571],{},"preset",": Use a ",[562,574,571],{"href":575},"/get-started/configuration#presets",[190,577,578,580,581],{},[277,579,279],{}," Responsive srcset with Vuetify ",[194,582,583],{},"v-img",[216,585,589],{"className":586,"code":587,"language":588,"meta":221,"style":221},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cv-img\n    :lazy-src=\"img(src, { width: 10, quality: 70 })\"\n    :src=\"img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps({\n  height: {\n    type: [Number, String],\n    default: 500\n  },\n  src: {\n    type: String,\n    default: '/img/header-bg.jpg'\n  }\n})\n\nconst img = useImage()\n\nconst _srcset = computed(() => {\n  return img.getSizes(props.src, {\n    sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n    modifiers: {\n      format: 'webp',\n      quality: 70,\n      height: props.height\n    }\n  })\n})\n\u003C/script>\n","html",[194,590,591,602,610,626,640,654,667,681,687,697,702,727,745,755,774,785,791,801,813,829,835,842,847,860,865,885,909,926,936,953,966,982,988,996,1003],{"__ignoreMap":221},[225,592,593,596,599],{"class":227,"line":228},[225,594,595],{"class":239},"\u003C",[225,597,598],{"class":347},"template",[225,600,601],{"class":239},">\n",[225,603,604,607],{"class":227,"line":250},[225,605,606],{"class":239},"  \u003C",[225,608,609],{"class":347},"v-img\n",[225,611,612,615,617,620,623],{"class":227,"line":257},[225,613,614],{"class":231},"    :lazy-src",[225,616,240],{"class":239},[225,618,619],{"class":239},"\"",[225,621,622],{"class":353},"img(src, { width: 10, quality: 70 })",[225,624,625],{"class":239},"\"\n",[225,627,628,631,633,635,638],{"class":227,"line":332},[225,629,630],{"class":231},"    :src",[225,632,240],{"class":239},[225,634,619],{"class":239},[225,636,637],{"class":353},"img(src, { height, quality: 70 })",[225,639,625],{"class":239},[225,641,642,645,647,649,652],{"class":227,"line":380},[225,643,644],{"class":231},"    :srcset",[225,646,240],{"class":239},[225,648,619],{"class":239},[225,650,651],{"class":353},"_srcset.srcset",[225,653,625],{"class":239},[225,655,656,659,661,663,665],{"class":227,"line":385},[225,657,658],{"class":231},"    :height",[225,660,240],{"class":239},[225,662,619],{"class":239},[225,664,530],{"class":353},[225,666,625],{"class":239},[225,668,669,672,674,676,679],{"class":227,"line":423},[225,670,671],{"class":231},"    :sizes",[225,673,240],{"class":239},[225,675,619],{"class":239},[225,677,678],{"class":353},"_srcset.sizes",[225,680,625],{"class":239},[225,682,684],{"class":227,"line":683},8,[225,685,686],{"class":239},"  />\n",[225,688,690,693,695],{"class":227,"line":689},9,[225,691,692],{"class":239},"\u003C/",[225,694,598],{"class":347},[225,696,601],{"class":239},[225,698,700],{"class":227,"line":699},10,[225,701,254],{"emptyLinePlaceholder":253},[225,703,705,707,710,713,716,718,720,723,725],{"class":227,"line":704},11,[225,706,595],{"class":239},[225,708,709],{"class":347},"script",[225,711,712],{"class":231}," setup",[225,714,715],{"class":231}," lang",[225,717,240],{"class":239},[225,719,619],{"class":239},[225,721,722],{"class":353},"ts",[225,724,619],{"class":239},[225,726,601],{"class":239},[225,728,730,732,735,737,740,742],{"class":227,"line":729},12,[225,731,232],{"class":231},[225,733,734],{"class":235}," props ",[225,736,240],{"class":239},[225,738,739],{"class":243}," defineProps",[225,741,320],{"class":235},[225,743,744],{"class":239},"{\n",[225,746,748,751,753],{"class":227,"line":747},13,[225,749,750],{"class":347},"  height",[225,752,367],{"class":239},[225,754,329],{"class":239},[225,756,758,761,763,766,768,771],{"class":227,"line":757},14,[225,759,760],{"class":347},"    type",[225,762,367],{"class":239},[225,764,765],{"class":235}," [Number",[225,767,265],{"class":239},[225,769,770],{"class":235}," String]",[225,772,773],{"class":239},",\n",[225,775,777,780,782],{"class":227,"line":776},15,[225,778,779],{"class":347},"    default",[225,781,367],{"class":239},[225,783,784],{"class":370}," 500\n",[225,786,788],{"class":227,"line":787},16,[225,789,790],{"class":239},"  },\n",[225,792,794,797,799],{"class":227,"line":793},17,[225,795,796],{"class":347},"  src",[225,798,367],{"class":239},[225,800,329],{"class":239},[225,802,804,806,808,811],{"class":227,"line":803},18,[225,805,760],{"class":347},[225,807,367],{"class":239},[225,809,810],{"class":235}," String",[225,812,773],{"class":239},[225,814,816,818,820,823,826],{"class":227,"line":815},19,[225,817,779],{"class":347},[225,819,367],{"class":239},[225,821,822],{"class":239}," '",[225,824,825],{"class":353},"/img/header-bg.jpg",[225,827,828],{"class":239},"'\n",[225,830,832],{"class":227,"line":831},20,[225,833,834],{"class":239},"  }\n",[225,836,838,840],{"class":227,"line":837},21,[225,839,411],{"class":239},[225,841,377],{"class":235},[225,843,845],{"class":227,"line":844},22,[225,846,254],{"emptyLinePlaceholder":253},[225,848,850,852,854,856,858],{"class":227,"line":849},23,[225,851,232],{"class":231},[225,853,236],{"class":235},[225,855,240],{"class":239},[225,857,244],{"class":243},[225,859,247],{"class":235},[225,861,863],{"class":227,"line":862},24,[225,864,254],{"emptyLinePlaceholder":253},[225,866,868,870,873,875,877,879,881,883],{"class":227,"line":867},25,[225,869,232],{"class":231},[225,871,872],{"class":235}," _srcset ",[225,874,240],{"class":239},[225,876,317],{"class":243},[225,878,320],{"class":235},[225,880,323],{"class":239},[225,882,326],{"class":231},[225,884,329],{"class":239},[225,886,888,890,892,894,896,898,901,903,905,907],{"class":227,"line":887},26,[225,889,389],{"class":388},[225,891,344],{"class":235},[225,893,462],{"class":239},[225,895,465],{"class":243},[225,897,320],{"class":347},[225,899,900],{"class":235},"props",[225,902,462],{"class":239},[225,904,504],{"class":235},[225,906,265],{"class":239},[225,908,329],{"class":239},[225,910,912,915,917,919,922,924],{"class":227,"line":911},27,[225,913,914],{"class":347},"    sizes",[225,916,367],{"class":239},[225,918,822],{"class":239},[225,920,921],{"class":353},"xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",[225,923,350],{"class":239},[225,925,773],{"class":239},[225,927,929,932,934],{"class":227,"line":928},28,[225,930,931],{"class":347},"    modifiers",[225,933,367],{"class":239},[225,935,329],{"class":239},[225,937,939,942,944,946,949,951],{"class":227,"line":938},29,[225,940,941],{"class":347},"      format",[225,943,367],{"class":239},[225,945,822],{"class":239},[225,947,948],{"class":353},"webp",[225,950,350],{"class":239},[225,952,773],{"class":239},[225,954,956,959,961,964],{"class":227,"line":955},30,[225,957,958],{"class":347},"      quality",[225,960,367],{"class":239},[225,962,963],{"class":370}," 70",[225,965,773],{"class":239},[225,967,969,972,974,977,979],{"class":227,"line":968},31,[225,970,971],{"class":347},"      height",[225,973,367],{"class":239},[225,975,976],{"class":235}," props",[225,978,462],{"class":239},[225,980,981],{"class":235},"height\n",[225,983,985],{"class":227,"line":984},32,[225,986,987],{"class":239},"    }\n",[225,989,991,994],{"class":227,"line":990},33,[225,992,993],{"class":239},"  }",[225,995,377],{"class":347},[225,997,999,1001],{"class":227,"line":998},34,[225,1000,411],{"class":239},[225,1002,377],{"class":235},[225,1004,1006,1008,1010],{"class":227,"line":1005},35,[225,1007,692],{"class":239},[225,1009,709],{"class":347},[225,1011,601],{"class":239},[1013,1014,1015],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":221,"searchDepth":250,"depth":250,"links":1017},[1018],{"id":214,"depth":250,"text":27,"children":1019},[1020],{"id":431,"depth":257,"text":434},"A Vue composable that returns a helper function to generate optimized image URLs.","md",[1024],{"label":1025,"icon":1026,"to":1027,"size":1028},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/composables.ts","xs",{},{"title":40,"description":1021},"tkVH99qL5bxpY5cWZEblbpGLHOUyUoYRWkqsLw9C_BY",[1033,1035],{"title":36,"path":37,"stem":38,"description":1034,"children":-1},"Discover how to use and configure the Nuxt Picture component.",{"title":48,"path":49,"stem":50,"description":1036,"children":-1},"Nuxt Image has first class integration with Aliyun.",1759174198924]