[{"data":1,"prerenderedAt":1039},["ShallowReactive",2],{"navigation":3,"-usage-use-image":184,"-usage-use-image-surround":1034},[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":1023,"extension":1024,"links":1025,"meta":1031,"navigation":253,"path":41,"seo":1032,"stem":42,"__hash__":1033},"docs/2.usage/3.use-image.md",{"type":187,"value":188,"toc":1018},"minimark",[189,211,215,274,285,428,435,484,493,498,578,586,1014],[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],"warning",{},[190,488,489,490,492],{},"Unstable: ",[194,491,465],{}," API might change or be removed.",[190,494,495],{},[277,496,497],{},"Parameters:",[499,500,501,508,514,549],"ul",{},[502,503,504,507],"li",{},[194,505,506],{},"src",": (string) Source to original image id",[502,509,510,513],{},[194,511,512],{},"sizes",": (string) List of responsive image sizes ({breakpoint}:{size}{unit})",[502,515,516,519,520],{},[194,517,518],{},"modifiers",": (object) Modifiers passed to provider for resizing and optimizing\n",[499,521,522,528,534,540,546],{},[502,523,524,527],{},[194,525,526],{},"width",": resize to the specified width (in pixels)",[502,529,530,533],{},[194,531,532],{},"height",": resize to specified height (in pixels)",[502,535,536,539],{},[194,537,538],{},"quality",": Change image quality (0 to 100)",[502,541,542,545],{},[194,543,544],{},"format",": Change the image format",[502,547,548],{},"(any other custom provider modifier)",[502,550,551,554,555],{},[194,552,553],{},"options",": (object)\n",[499,556,557,569],{},[502,558,559,562,563,568],{},[194,560,561],{},"provider",": (string) Provider name other than default (see ",[564,565,567],"a",{"href":566},"/get-started/configuration#providers","providers",")",[502,570,571,574,575],{},[194,572,573],{},"preset",": Use a ",[564,576,573],{"href":577},"/get-started/configuration#presets",[190,579,580,582,583],{},[277,581,279],{}," Responsive srcset with Vuetify ",[194,584,585],{},"v-img",[216,587,591],{"className":588,"code":589,"language":590,"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,592,593,604,612,628,642,656,669,683,689,699,704,729,747,757,776,787,793,803,815,831,837,844,849,862,867,887,911,928,938,955,968,984,990,998,1005],{"__ignoreMap":221},[225,594,595,598,601],{"class":227,"line":228},[225,596,597],{"class":239},"\u003C",[225,599,600],{"class":347},"template",[225,602,603],{"class":239},">\n",[225,605,606,609],{"class":227,"line":250},[225,607,608],{"class":239},"  \u003C",[225,610,611],{"class":347},"v-img\n",[225,613,614,617,619,622,625],{"class":227,"line":257},[225,615,616],{"class":231},"    :lazy-src",[225,618,240],{"class":239},[225,620,621],{"class":239},"\"",[225,623,624],{"class":353},"img(src, { width: 10, quality: 70 })",[225,626,627],{"class":239},"\"\n",[225,629,630,633,635,637,640],{"class":227,"line":332},[225,631,632],{"class":231},"    :src",[225,634,240],{"class":239},[225,636,621],{"class":239},[225,638,639],{"class":353},"img(src, { height, quality: 70 })",[225,641,627],{"class":239},[225,643,644,647,649,651,654],{"class":227,"line":380},[225,645,646],{"class":231},"    :srcset",[225,648,240],{"class":239},[225,650,621],{"class":239},[225,652,653],{"class":353},"_srcset.srcset",[225,655,627],{"class":239},[225,657,658,661,663,665,667],{"class":227,"line":385},[225,659,660],{"class":231},"    :height",[225,662,240],{"class":239},[225,664,621],{"class":239},[225,666,532],{"class":353},[225,668,627],{"class":239},[225,670,671,674,676,678,681],{"class":227,"line":423},[225,672,673],{"class":231},"    :sizes",[225,675,240],{"class":239},[225,677,621],{"class":239},[225,679,680],{"class":353},"_srcset.sizes",[225,682,627],{"class":239},[225,684,686],{"class":227,"line":685},8,[225,687,688],{"class":239},"  />\n",[225,690,692,695,697],{"class":227,"line":691},9,[225,693,694],{"class":239},"\u003C/",[225,696,600],{"class":347},[225,698,603],{"class":239},[225,700,702],{"class":227,"line":701},10,[225,703,254],{"emptyLinePlaceholder":253},[225,705,707,709,712,715,718,720,722,725,727],{"class":227,"line":706},11,[225,708,597],{"class":239},[225,710,711],{"class":347},"script",[225,713,714],{"class":231}," setup",[225,716,717],{"class":231}," lang",[225,719,240],{"class":239},[225,721,621],{"class":239},[225,723,724],{"class":353},"ts",[225,726,621],{"class":239},[225,728,603],{"class":239},[225,730,732,734,737,739,742,744],{"class":227,"line":731},12,[225,733,232],{"class":231},[225,735,736],{"class":235}," props ",[225,738,240],{"class":239},[225,740,741],{"class":243}," defineProps",[225,743,320],{"class":235},[225,745,746],{"class":239},"{\n",[225,748,750,753,755],{"class":227,"line":749},13,[225,751,752],{"class":347},"  height",[225,754,367],{"class":239},[225,756,329],{"class":239},[225,758,760,763,765,768,770,773],{"class":227,"line":759},14,[225,761,762],{"class":347},"    type",[225,764,367],{"class":239},[225,766,767],{"class":235}," [Number",[225,769,265],{"class":239},[225,771,772],{"class":235}," String]",[225,774,775],{"class":239},",\n",[225,777,779,782,784],{"class":227,"line":778},15,[225,780,781],{"class":347},"    default",[225,783,367],{"class":239},[225,785,786],{"class":370}," 500\n",[225,788,790],{"class":227,"line":789},16,[225,791,792],{"class":239},"  },\n",[225,794,796,799,801],{"class":227,"line":795},17,[225,797,798],{"class":347},"  src",[225,800,367],{"class":239},[225,802,329],{"class":239},[225,804,806,808,810,813],{"class":227,"line":805},18,[225,807,762],{"class":347},[225,809,367],{"class":239},[225,811,812],{"class":235}," String",[225,814,775],{"class":239},[225,816,818,820,822,825,828],{"class":227,"line":817},19,[225,819,781],{"class":347},[225,821,367],{"class":239},[225,823,824],{"class":239}," '",[225,826,827],{"class":353},"/img/header-bg.jpg",[225,829,830],{"class":239},"'\n",[225,832,834],{"class":227,"line":833},20,[225,835,836],{"class":239},"  }\n",[225,838,840,842],{"class":227,"line":839},21,[225,841,411],{"class":239},[225,843,377],{"class":235},[225,845,847],{"class":227,"line":846},22,[225,848,254],{"emptyLinePlaceholder":253},[225,850,852,854,856,858,860],{"class":227,"line":851},23,[225,853,232],{"class":231},[225,855,236],{"class":235},[225,857,240],{"class":239},[225,859,244],{"class":243},[225,861,247],{"class":235},[225,863,865],{"class":227,"line":864},24,[225,866,254],{"emptyLinePlaceholder":253},[225,868,870,872,875,877,879,881,883,885],{"class":227,"line":869},25,[225,871,232],{"class":231},[225,873,874],{"class":235}," _srcset ",[225,876,240],{"class":239},[225,878,317],{"class":243},[225,880,320],{"class":235},[225,882,323],{"class":239},[225,884,326],{"class":231},[225,886,329],{"class":239},[225,888,890,892,894,896,898,900,903,905,907,909],{"class":227,"line":889},26,[225,891,389],{"class":388},[225,893,344],{"class":235},[225,895,462],{"class":239},[225,897,465],{"class":243},[225,899,320],{"class":347},[225,901,902],{"class":235},"props",[225,904,462],{"class":239},[225,906,506],{"class":235},[225,908,265],{"class":239},[225,910,329],{"class":239},[225,912,914,917,919,921,924,926],{"class":227,"line":913},27,[225,915,916],{"class":347},"    sizes",[225,918,367],{"class":239},[225,920,824],{"class":239},[225,922,923],{"class":353},"xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",[225,925,350],{"class":239},[225,927,775],{"class":239},[225,929,931,934,936],{"class":227,"line":930},28,[225,932,933],{"class":347},"    modifiers",[225,935,367],{"class":239},[225,937,329],{"class":239},[225,939,941,944,946,948,951,953],{"class":227,"line":940},29,[225,942,943],{"class":347},"      format",[225,945,367],{"class":239},[225,947,824],{"class":239},[225,949,950],{"class":353},"webp",[225,952,350],{"class":239},[225,954,775],{"class":239},[225,956,958,961,963,966],{"class":227,"line":957},30,[225,959,960],{"class":347},"      quality",[225,962,367],{"class":239},[225,964,965],{"class":370}," 70",[225,967,775],{"class":239},[225,969,971,974,976,979,981],{"class":227,"line":970},31,[225,972,973],{"class":347},"      height",[225,975,367],{"class":239},[225,977,978],{"class":235}," props",[225,980,462],{"class":239},[225,982,983],{"class":235},"height\n",[225,985,987],{"class":227,"line":986},32,[225,988,989],{"class":239},"    }\n",[225,991,993,996],{"class":227,"line":992},33,[225,994,995],{"class":239},"  }",[225,997,377],{"class":347},[225,999,1001,1003],{"class":227,"line":1000},34,[225,1002,411],{"class":239},[225,1004,377],{"class":235},[225,1006,1008,1010,1012],{"class":227,"line":1007},35,[225,1009,694],{"class":239},[225,1011,711],{"class":347},[225,1013,603],{"class":239},[1015,1016,1017],"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":1019},[1020],{"id":214,"depth":250,"text":27,"children":1021},[1022],{"id":431,"depth":257,"text":434},"A Vue composable that returns a helper function to generate optimized image URLs.","md",[1026],{"label":1027,"icon":1028,"to":1029,"size":1030},"Source","i-simple-icons-github","https://github.com/nuxt/image/blob/main/src/runtime/composables.ts","xs",{},{"title":40,"description":1023},"vbArARURducCudts1JenC-nZ44XSC2PEvd1UI0DzkgM",[1035,1037],{"title":36,"path":37,"stem":38,"description":1036,"children":-1},"Discover how to use and configure the Nuxt Picture component.",{"title":48,"path":49,"stem":50,"description":1038,"children":-1},"Nuxt Image has first class integration with Aliyun.",1753877278230]