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