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