[{"data":1,"prerenderedAt":862},["ShallowReactive",2],{"navigation_docs":3,"-advanced-custom-provider":192,"-advanced-custom-provider-surround":857},[4,26,43,179],{"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,171,175],{"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},"GitHub","/providers/github","3.providers/github",{"title":96,"path":97,"stem":98},"Glide","/providers/glide","3.providers/glide",{"title":100,"path":101,"stem":102},"Gumlet","/providers/gumlet","3.providers/gumlet",{"title":104,"path":105,"stem":106},"Hygraph","/providers/hygraph","3.providers/hygraph",{"title":108,"path":109,"stem":110},"ImageEngine","/providers/imageengine","3.providers/imageengine",{"title":112,"path":113,"stem":114},"ImageKit","/providers/imagekit","3.providers/imagekit",{"title":116,"path":117,"stem":118},"Imgix","/providers/imgix","3.providers/imgix",{"title":120,"path":121,"stem":122},"IPX","/providers/ipx","3.providers/ipx",{"title":124,"path":125,"stem":126},"Netlify","/providers/netlify","3.providers/netlify",{"title":128,"path":129,"stem":130},"None","/providers/none","3.providers/none",{"title":132,"path":133,"stem":134},"Prepr","/providers/prepr","3.providers/prepr",{"title":136,"path":137,"stem":138},"Prismic","/providers/prismic","3.providers/prismic",{"title":140,"path":141,"stem":142},"Sanity","/providers/sanity","3.providers/sanity",{"title":144,"path":145,"stem":146},"Shopify","/providers/shopify","3.providers/shopify",{"title":148,"path":149,"stem":150},"Sirv","/providers/sirv","3.providers/sirv",{"title":152,"path":153,"stem":154},"Storyblok","/providers/storyblok","3.providers/storyblok",{"title":156,"path":157,"stem":158},"Strapi","/providers/strapi","3.providers/strapi",{"title":160,"path":161,"stem":162},"Twicpics","/providers/twicpics","3.providers/twicpics",{"title":164,"path":165,"stem":166},"Unsplash","/providers/unsplash","3.providers/unsplash",{"title":168,"path":169,"stem":170},"Uploadcare","/providers/uploadcare","3.providers/uploadcare",{"title":172,"path":173,"stem":174},"Vercel","/providers/vercel","3.providers/vercel",{"title":176,"path":177,"stem":178},"Weserv","/providers/weserv","3.providers/weserv",{"title":180,"path":181,"stem":182,"children":183,"page":25},"Advanced","/advanced","4.advanced",[184,188],{"title":185,"path":186,"stem":187},"Custom Provider","/advanced/custom-provider","4.advanced/1.custom-provider",{"title":189,"path":190,"stem":191},"Static Images","/advanced/static-images","4.advanced/2.static-images",{"id":193,"title":185,"body":194,"description":851,"extension":852,"links":853,"meta":854,"navigation":282,"path":186,"seo":855,"stem":187,"__hash__":856},"docs/4.advanced/1.custom-provider.md",{"type":195,"value":196,"toc":841},"minimark",[197,202,206,541,546,591,601,605,613,617,621,631,767,780,783,790,837],[198,199,201],"h2",{"id":200},"provider-entry","Provider Entry",[203,204,205],"p",{},"The runtime will receive a source, image modifiers and its provider options. It is responsible for generating a URL for optimized images, and needs to be isomorphic because it may be called on either server or client.",[207,208,214],"pre",{"className":209,"code":210,"filename":211,"language":212,"meta":213,"style":213},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { joinURL } from 'ufo'\nimport { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'\n\nconst operationsGenerator = createOperationsGenerator()\n\nexport default defineProvider\u003C{ baseURL?: string }>({\n  getImage (src, { modifiers, baseURL }) {\n    if (!baseURL) {\n      // also support runtime config \n      baseURL = useRuntimeConfig().public.siteUrl\n    }\n\n    const operations = operationsGenerator(modifiers)\n\n    return {\n      url: joinURL(baseURL, src + (operations ? '?' + operations : ''))\n    }\n  }\n})\n","providers/my-provider.ts","ts","",[215,216,217,250,277,284,303,308,342,372,391,398,424,430,435,457,462,470,522,527,533],"code",{"__ignoreMap":213},[218,219,222,226,230,234,237,240,243,247],"span",{"class":220,"line":221},"line",1,[218,223,225],{"class":224},"s7zQu","import",[218,227,229],{"class":228},"sMK4o"," {",[218,231,233],{"class":232},"sTEyZ"," joinURL",[218,235,236],{"class":228}," }",[218,238,239],{"class":224}," from",[218,241,242],{"class":228}," '",[218,244,246],{"class":245},"sfazB","ufo",[218,248,249],{"class":228},"'\n",[218,251,253,255,257,260,263,266,268,270,272,275],{"class":220,"line":252},2,[218,254,225],{"class":224},[218,256,229],{"class":228},[218,258,259],{"class":232}," createOperationsGenerator",[218,261,262],{"class":228},",",[218,264,265],{"class":232}," defineProvider",[218,267,236],{"class":228},[218,269,239],{"class":224},[218,271,242],{"class":228},[218,273,274],{"class":245},"@nuxt/image/runtime",[218,276,249],{"class":228},[218,278,280],{"class":220,"line":279},3,[218,281,283],{"emptyLinePlaceholder":282},true,"\n",[218,285,287,291,294,297,300],{"class":220,"line":286},4,[218,288,290],{"class":289},"spNyl","const",[218,292,293],{"class":232}," operationsGenerator ",[218,295,296],{"class":228},"=",[218,298,259],{"class":299},"s2Zo4",[218,301,302],{"class":232},"()\n",[218,304,306],{"class":220,"line":305},5,[218,307,283],{"emptyLinePlaceholder":282},[218,309,311,314,317,319,322,326,329,333,336,339],{"class":220,"line":310},6,[218,312,313],{"class":224},"export",[218,315,316],{"class":224}," default",[218,318,265],{"class":299},[218,320,321],{"class":228},"\u003C{",[218,323,325],{"class":324},"swJcz"," baseURL",[218,327,328],{"class":228},"?:",[218,330,332],{"class":331},"sBMFI"," string",[218,334,335],{"class":228}," }>",[218,337,338],{"class":232},"(",[218,340,341],{"class":228},"{\n",[218,343,345,348,351,355,357,359,362,364,366,369],{"class":220,"line":344},7,[218,346,347],{"class":324},"  getImage",[218,349,350],{"class":228}," (",[218,352,354],{"class":353},"sHdIc","src",[218,356,262],{"class":228},[218,358,229],{"class":228},[218,360,361],{"class":353}," modifiers",[218,363,262],{"class":228},[218,365,325],{"class":353},[218,367,368],{"class":228}," })",[218,370,371],{"class":228}," {\n",[218,373,375,378,380,383,386,389],{"class":220,"line":374},8,[218,376,377],{"class":224},"    if",[218,379,350],{"class":324},[218,381,382],{"class":228},"!",[218,384,385],{"class":232},"baseURL",[218,387,388],{"class":324},") ",[218,390,341],{"class":228},[218,392,394],{"class":220,"line":393},9,[218,395,397],{"class":396},"sHwdD","      // also support runtime config \n",[218,399,401,404,407,410,413,416,419,421],{"class":220,"line":400},10,[218,402,403],{"class":232},"      baseURL",[218,405,406],{"class":228}," =",[218,408,409],{"class":299}," useRuntimeConfig",[218,411,412],{"class":324},"()",[218,414,415],{"class":228},".",[218,417,418],{"class":232},"public",[218,420,415],{"class":228},[218,422,423],{"class":232},"siteUrl\n",[218,425,427],{"class":220,"line":426},11,[218,428,429],{"class":228},"    }\n",[218,431,433],{"class":220,"line":432},12,[218,434,283],{"emptyLinePlaceholder":282},[218,436,438,441,444,446,449,451,454],{"class":220,"line":437},13,[218,439,440],{"class":289},"    const",[218,442,443],{"class":232}," operations",[218,445,406],{"class":228},[218,447,448],{"class":299}," operationsGenerator",[218,450,338],{"class":324},[218,452,453],{"class":232},"modifiers",[218,455,456],{"class":324},")\n",[218,458,460],{"class":220,"line":459},14,[218,461,283],{"emptyLinePlaceholder":282},[218,463,465,468],{"class":220,"line":464},15,[218,466,467],{"class":224},"    return",[218,469,371],{"class":228},[218,471,473,476,479,481,483,485,487,490,493,495,498,501,503,506,509,511,513,516,519],{"class":220,"line":472},16,[218,474,475],{"class":324},"      url",[218,477,478],{"class":228},":",[218,480,233],{"class":299},[218,482,338],{"class":324},[218,484,385],{"class":232},[218,486,262],{"class":228},[218,488,489],{"class":232}," src",[218,491,492],{"class":228}," +",[218,494,350],{"class":324},[218,496,497],{"class":232},"operations",[218,499,500],{"class":228}," ?",[218,502,242],{"class":228},[218,504,505],{"class":245},"?",[218,507,508],{"class":228},"'",[218,510,492],{"class":228},[218,512,443],{"class":232},[218,514,515],{"class":228}," :",[218,517,518],{"class":228}," ''",[218,520,521],{"class":324},"))\n",[218,523,525],{"class":220,"line":524},17,[218,526,429],{"class":228},[218,528,530],{"class":220,"line":529},18,[218,531,532],{"class":228},"  }\n",[218,534,536,539],{"class":220,"line":535},19,[218,537,538],{"class":228},"}",[218,540,456],{"class":232},[542,543,545],"h3",{"id":544},"parameters","Parameters",[547,548,549,555,560],"ul",{},[550,551,552,554],"li",{},[215,553,354],{},": Source path of the image.",[550,556,557,559],{},[215,558,453],{},": List of image modifiers that are defined in the image component or as a preset.",[550,561,562,565,566,569,570],{},[215,563,564],{},"ctx",": (",[215,567,568],{},"ImageCTX",") Image module runtime context\n",[547,571,572,581],{},[550,573,574,565,577,580],{},[215,575,576],{},"options",[215,578,579],{},"CreateImageOptions",") Image module global runtime options",[550,582,583,586,587],{},[215,584,585],{},"$img",": The ",[588,589,590],"a",{"href":41},"$img helper",[203,592,593,597,598,600],{},[594,595,596],"strong",{},"Note:"," Values in ",[215,599,564],{}," might change. Use it with caution.",[542,602,604],{"id":603},"return","Return",[547,606,607],{},[550,608,609,612],{},[215,610,611],{},"url",": Absolute or relative URL of optimized image.",[198,614,616],{"id":615},"use-your-provider","Use Your Provider",[542,618,620],{"id":619},"register-provider","Register provider",[203,622,623,624,627,628,415],{},"After you create your own provider, you should register it in the ",[215,625,626],{},"nuxt.config",". In order to do that create a property inside ",[215,629,630],{},"image.provider",[207,632,635],{"className":209,"code":633,"filename":634,"language":212,"meta":213,"style":213},"export default defineNuxtConfig({\n  image: {\n    providers: {\n      myProvider: {\n        name: 'myProvider', // optional value to overrider provider name\n        provider: '~/providers/my-provider.ts', // Path to custom provider\n        options: {\n          // ... provider options\n          baseURL: 'https://site.com'\n        }\n      }\n    }\n  }\n})\n","nuxt.config.ts",[215,636,637,650,659,668,677,696,715,724,729,743,748,753,757,761],{"__ignoreMap":213},[218,638,639,641,643,646,648],{"class":220,"line":221},[218,640,313],{"class":224},[218,642,316],{"class":224},[218,644,645],{"class":299}," defineNuxtConfig",[218,647,338],{"class":232},[218,649,341],{"class":228},[218,651,652,655,657],{"class":220,"line":252},[218,653,654],{"class":324},"  image",[218,656,478],{"class":228},[218,658,371],{"class":228},[218,660,661,664,666],{"class":220,"line":279},[218,662,663],{"class":324},"    providers",[218,665,478],{"class":228},[218,667,371],{"class":228},[218,669,670,673,675],{"class":220,"line":286},[218,671,672],{"class":324},"      myProvider",[218,674,478],{"class":228},[218,676,371],{"class":228},[218,678,679,682,684,686,689,691,693],{"class":220,"line":305},[218,680,681],{"class":324},"        name",[218,683,478],{"class":228},[218,685,242],{"class":228},[218,687,688],{"class":245},"myProvider",[218,690,508],{"class":228},[218,692,262],{"class":228},[218,694,695],{"class":396}," // optional value to overrider provider name\n",[218,697,698,701,703,705,708,710,712],{"class":220,"line":310},[218,699,700],{"class":324},"        provider",[218,702,478],{"class":228},[218,704,242],{"class":228},[218,706,707],{"class":245},"~/providers/my-provider.ts",[218,709,508],{"class":228},[218,711,262],{"class":228},[218,713,714],{"class":396}," // Path to custom provider\n",[218,716,717,720,722],{"class":220,"line":344},[218,718,719],{"class":324},"        options",[218,721,478],{"class":228},[218,723,371],{"class":228},[218,725,726],{"class":220,"line":374},[218,727,728],{"class":396},"          // ... provider options\n",[218,730,731,734,736,738,741],{"class":220,"line":393},[218,732,733],{"class":324},"          baseURL",[218,735,478],{"class":228},[218,737,242],{"class":228},[218,739,740],{"class":245},"https://site.com",[218,742,249],{"class":228},[218,744,745],{"class":220,"line":400},[218,746,747],{"class":228},"        }\n",[218,749,750],{"class":220,"line":426},[218,751,752],{"class":228},"      }\n",[218,754,755],{"class":220,"line":432},[218,756,429],{"class":228},[218,758,759],{"class":220,"line":437},[218,760,532],{"class":228},[218,762,763,765],{"class":220,"line":459},[218,764,538],{"class":228},[218,766,456],{"class":232},[203,768,769,770,772,773,779],{},"There are plenty of useful utilities that can be used to write providers by importing from ",[215,771,274],{},". See ",[588,774,778],{"href":775,"rel":776},"https://github.com/nuxt/image/tree/main/src/runtime/providers",[777],"nofollow","src/runtime/providers"," for more info.",[542,781,27],{"id":782},"usage",[203,784,785,786,789],{},"Set attribute ",[215,787,788],{},"provider"," as your custom provider name.",[207,791,796],{"className":792,"code":793,"filename":794,"language":795,"meta":213,"style":213},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg provider=\"myProvider\" src=\"/image.png\" >\n\u003C!-- \u003Cimg src=\"https://site.com/image.png\"> -->\n","pages/index.vue","vue",[215,797,798,832],{"__ignoreMap":213},[218,799,800,803,806,809,811,814,816,818,820,822,824,827,829],{"class":220,"line":221},[218,801,802],{"class":228},"\u003C",[218,804,805],{"class":324},"NuxtImg",[218,807,808],{"class":289}," provider",[218,810,296],{"class":228},[218,812,813],{"class":228},"\"",[218,815,688],{"class":245},[218,817,813],{"class":228},[218,819,489],{"class":289},[218,821,296],{"class":228},[218,823,813],{"class":228},[218,825,826],{"class":245},"/image.png",[218,828,813],{"class":228},[218,830,831],{"class":228}," >\n",[218,833,834],{"class":220,"line":252},[218,835,836],{"class":232},"\u003C!-- \u003Cimg src=\"https://site.com/image.png\"> -->\n",[838,839,840],"style",{},"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}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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":213,"searchDepth":252,"depth":252,"links":842},[843,847],{"id":200,"depth":252,"text":201,"children":844},[845,846],{"id":544,"depth":279,"text":545},{"id":603,"depth":279,"text":604},{"id":615,"depth":252,"text":616,"children":848},[849,850],{"id":619,"depth":279,"text":620},{"id":782,"depth":279,"text":27},"If a CDN provider is not supported, you can define it yourself.","md",null,{},{"title":185,"description":851},"tZOb1AetQMma3qdsTdgIA0sXN9aexpcI5iNm-bdaOGo",[858,860],{"title":176,"path":177,"stem":178,"description":859,"children":-1},"Optimize images with Weserv's dynamic image transformation service.",{"title":189,"path":190,"stem":191,"description":861,"children":-1},"Optimizing images for static websites.",1762265123122]