[{"data":1,"prerenderedAt":1902},["ShallowReactive",2],{"navigation_docs":3,"-providers-imagekit":228,"-providers-imagekit-surround":1897},[4,30,47,215],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F3.providers",{"title":22,"path":23,"stem":24},"Contributing","\u002Fget-started\u002Fcontributing","1.get-started\u002F4.contributing",{"title":26,"path":27,"stem":28},"Migration","\u002Fget-started\u002Fmigration","1.get-started\u002F5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","\u002Fusage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","\u002Fusage\u002Fnuxt-img","2.usage\u002F1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","\u002Fusage\u002Fnuxt-picture","2.usage\u002F2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","\u002Fusage\u002Fuse-image","2.usage\u002F3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"\u002Fproviders","3.providers",[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,179,183,187,191,195,199,203,207,211],{"title":52,"path":53,"stem":54},"Aliyun","\u002Fproviders\u002Faliyun","3.providers\u002Faliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","\u002Fproviders\u002Faws-amplify","3.providers\u002Faws-amplify",{"title":60,"path":61,"stem":62},"Builder.io","\u002Fproviders\u002Fbuilderio","3.providers\u002Fbuilderio",{"title":64,"path":65,"stem":66},"Bunny","\u002Fproviders\u002Fbunny","3.providers\u002Fbunny",{"title":68,"path":69,"stem":70},"Caisy","\u002Fproviders\u002Fcaisy","3.providers\u002Fcaisy",{"title":72,"path":73,"stem":74},"Cloudflare","\u002Fproviders\u002Fcloudflare","3.providers\u002Fcloudflare",{"title":76,"path":77,"stem":78},"Cloudflare Images","\u002Fproviders\u002Fcloudflareimages","3.providers\u002Fcloudflareimages",{"title":80,"path":81,"stem":82},"Cloudimage","\u002Fproviders\u002Fcloudimage","3.providers\u002Fcloudimage",{"title":84,"path":85,"stem":86},"Cloudinary","\u002Fproviders\u002Fcloudinary","3.providers\u002Fcloudinary",{"title":88,"path":89,"stem":90},"Contentful","\u002Fproviders\u002Fcontentful","3.providers\u002Fcontentful",{"title":92,"path":93,"stem":94},"Directus","\u002Fproviders\u002Fdirectus","3.providers\u002Fdirectus",{"title":96,"path":97,"stem":98},"EdgeOne Pages","\u002Fproviders\u002Fedgeone-pages","3.providers\u002Fedgeone-pages",{"title":100,"path":101,"stem":102},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":104,"path":105,"stem":106},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":108,"path":109,"stem":110},"Flyimg","\u002Fproviders\u002Fflyimg","3.providers\u002Fflyimg",{"title":112,"path":113,"stem":114},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":116,"path":117,"stem":118},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":120,"path":121,"stem":122},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":124,"path":125,"stem":126},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":128,"path":129,"stem":130},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":132,"path":133,"stem":134},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":136,"path":137,"stem":138},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":140,"path":141,"stem":142},"Imgproxy","\u002Fproviders\u002Fimgproxy","3.providers\u002Fimgproxy",{"title":144,"path":145,"stem":146},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":148,"path":149,"stem":150},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":152,"path":153,"stem":154},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":156,"path":157,"stem":158},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":160,"path":161,"stem":162},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":164,"path":165,"stem":166},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":168,"path":169,"stem":170},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":172,"path":173,"stem":174},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":176,"path":177,"stem":178},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":180,"path":181,"stem":182},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":184,"path":185,"stem":186},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":188,"path":189,"stem":190},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":192,"path":193,"stem":194},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":196,"path":197,"stem":198},"Umbraco","\u002Fproviders\u002Fumbraco","3.providers\u002Fumbraco",{"title":200,"path":201,"stem":202},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":204,"path":205,"stem":206},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":208,"path":209,"stem":210},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":212,"path":213,"stem":214},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":216,"path":217,"stem":218,"children":219,"page":29},"Advanced","\u002Fadvanced","4.advanced",[220,224],{"title":221,"path":222,"stem":223},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":225,"path":226,"stem":227},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":229,"title":132,"body":230,"description":1887,"extension":1788,"links":1888,"meta":1894,"navigation":1219,"path":133,"seo":1895,"stem":134,"__hash__":1896},"docs\u002F3.providers\u002Fimagekit.md",{"type":231,"value":232,"toc":1864},"minimark",[233,244,247,344,361,370,379,405,414,418,430,436,476,488,499,507,512,525,606,612,618,696,701,710,720,725,731,812,817,841,904,909,918,981,986,991,1097,1107,1111,1133,1137,1140,1288,1292,1295,1421,1428,1432,1438,1443,1517,1523,1528,1602,1606,1609,1849,1860],[234,235,236,237,243],"p",{},"Integration between ",[238,239,132],"a",{"href":240,"rel":241},"https:\u002F\u002Fdocs.imagekit.io",[242],"nofollow"," and the image module.",[234,245,246],{},"To use the ImageKit provider, you need to set your ImageKit account URL-endpoint as the base URL like below.",[248,249,255],"pre",{"className":250,"code":251,"filename":252,"language":253,"meta":254,"style":254},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    imagekit: {\n      baseURL: 'https:\u002F\u002Fik.imagekit.io\u002Fyour_imagekit_id'\n    }\n  }\n})\n","nuxt.config.ts","ts","",[256,257,258,282,295,305,323,329,335],"code",{"__ignoreMap":254},[259,260,263,267,270,274,278],"span",{"class":261,"line":262},"line",1,[259,264,266],{"class":265},"s7zQu","export",[259,268,269],{"class":265}," default",[259,271,273],{"class":272},"s2Zo4"," defineNuxtConfig",[259,275,277],{"class":276},"sTEyZ","(",[259,279,281],{"class":280},"sMK4o","{\n",[259,283,285,289,292],{"class":261,"line":284},2,[259,286,288],{"class":287},"swJcz","  image",[259,290,291],{"class":280},":",[259,293,294],{"class":280}," {\n",[259,296,298,301,303],{"class":261,"line":297},3,[259,299,300],{"class":287},"    imagekit",[259,302,291],{"class":280},[259,304,294],{"class":280},[259,306,308,311,313,316,320],{"class":261,"line":307},4,[259,309,310],{"class":287},"      baseURL",[259,312,291],{"class":280},[259,314,315],{"class":280}," '",[259,317,319],{"class":318},"sfazB","https:\u002F\u002Fik.imagekit.io\u002Fyour_imagekit_id",[259,321,322],{"class":280},"'\n",[259,324,326],{"class":261,"line":325},5,[259,327,328],{"class":280},"    }\n",[259,330,332],{"class":261,"line":331},6,[259,333,334],{"class":280},"  }\n",[259,336,338,341],{"class":261,"line":337},7,[259,339,340],{"class":280},"}",[259,342,343],{"class":276},")\n",[345,346,347],"blockquote",{},[234,348,349,350,355,356,360],{},"You can get ",[238,351,354],{"href":352,"rel":353},"https:\u002F\u002Fdocs.imagekit.io\u002Fintegration\u002Furl-endpoints#default-url-endpoint",[242],"URL-endpoint"," from your ImageKit dashboard - ",[238,357,358],{"href":358,"rel":359},"https:\u002F\u002Fimagekit.io\u002Fdashboard#url-endpoints",[242],".",[362,363,365,366,369],"h2",{"id":364},"imagekit-fit-parameters","ImageKit ",[256,367,368],{},"fit"," Parameters",[234,371,372,373,378],{},"In addition to the standard ",[238,374,376],{"href":375},"\u002Fusage\u002Fnuxt-img#fit",[256,377,368],{}," properties of Nuxt Image and Nuxt Picture, ImageKit offers more cropping and resizing options to the users:",[380,381,382,393],"ul",{},[383,384,385,388,389,392],"li",{},[256,386,387],{},"extract"," - The output image has its height, width as requested, and the aspect ratio is preserved. Unlike the ",[256,390,391],{},"cover"," parameter, we extract out a region of the requested dimension from the original image.",[383,394,395,398,399,401,402,404],{},[256,396,397],{},"pad_extract"," - This parameter is similar to ",[256,400,387],{},". This comes in handy in scenarios where we want to extract an image of a larger dimension from a smaller image. So, the ",[256,403,397],{}," mode adds solid colored padding around the image to match the exact size requested.",[234,406,407,408,413],{},"Read ImageKit ",[238,409,412],{"href":410,"rel":411},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#crop-crop-modes-and-focus",[242],"crop and crop mode documentation"," for more details and examples of how it works.",[362,415,417],{"id":416},"imagekit-modifiers","ImageKit Modifiers",[234,419,420,421,425,426,429],{},"On top of the standard ",[238,422,424],{"href":423},"\u002Fusage\u002Fnuxt-img#modifiers","Nuxt Image modifiers",", a user can also leverage ImageKit-specific transformation parameters provided in the ",[256,427,428],{},"modifier"," prop.",[431,432,434],"h3",{"id":433},"focus",[256,435,433],{},[234,437,438,439,442,443,442,446,442,449,442,452,442,455,442,457,442,459,442,461,442,463,442,466,442,469,472,473,360],{},"This parameter can be used along with resizing and cropping to focus on the desired part of the image. You can use focus parameter values like ",[256,440,441],{},"left",", ",[256,444,445],{},"right",[256,447,448],{},"top",[256,450,451],{},"bottom",[256,453,454],{},"center",[256,456,448],{},[256,458,441],{},[256,460,451],{},[256,462,445],{},[256,464,465],{},"top_left",[256,467,468],{},"top_right",[256,470,471],{},"bottom_left"," and ",[256,474,475],{},"bottom_right",[234,477,478,479,482,483,360],{},"Custom coordinates can also be used to focus using parameter value ",[256,480,481],{},"custom",". Learn more from ",[238,484,487],{"href":485,"rel":486},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#example-focus-using-custom-coordinates",[242],"example",[234,489,490,491,494,495,498],{},"Moreover, ImageKit also provides smart cropping that can automatically detect the most important part of the image using ",[256,492,493],{},"auto",". And, ",[256,496,497],{},"face"," can be used to find a face (or multiple faces) in an image and focus on that.",[234,500,501,502,506],{},"Check out ImageKit's documentation on ",[238,503,433],{"href":504,"rel":505},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations#focus-fo",[242]," to learn more.",[431,508,510],{"id":509},"blur",[256,511,509],{},[234,513,514,515,517,518,521,522,360],{},"This can be used to blur an image. Use modifier ",[256,516,509],{}," to specify the Gaussian Blur radius that is to be applied to the image. Possible values include integers between ",[256,519,520],{},"1"," to ",[256,523,524],{},"100",[248,526,530],{"className":527,"code":528,"language":529,"meta":254,"style":254},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ blur: 10 }\"\n\u002F>\n","vue",[256,531,532,540,558,572,601],{"__ignoreMap":254},[259,533,534,537],{"class":261,"line":262},[259,535,536],{"class":280},"\u003C",[259,538,539],{"class":287},"NuxtImg\n",[259,541,542,546,549,552,555],{"class":261,"line":284},[259,543,545],{"class":544},"spNyl","  provider",[259,547,548],{"class":280},"=",[259,550,551],{"class":280},"\"",[259,553,554],{"class":318},"imagekit",[259,556,557],{"class":280},"\"\n",[259,559,560,563,565,567,570],{"class":261,"line":297},[259,561,562],{"class":544},"  src",[259,564,548],{"class":280},[259,566,551],{"class":280},[259,568,569],{"class":318},"\u002Fdefault-image.jpg",[259,571,557],{"class":280},[259,573,574,577,580,582,584,587,590,592,596,599],{"class":261,"line":307},[259,575,576],{"class":280},"  :",[259,578,579],{"class":544},"modifiers",[259,581,548],{"class":280},[259,583,551],{"class":280},[259,585,586],{"class":280},"{",[259,588,589],{"class":287}," blur",[259,591,291],{"class":280},[259,593,595],{"class":594},"sbssI"," 10",[259,597,598],{"class":280}," }",[259,600,557],{"class":280},[259,602,603],{"class":261,"line":325},[259,604,605],{"class":276},"\u002F>\n",[431,607,609],{"id":608},"effectgray",[256,610,611],{},"effectGray",[234,613,614,615,617],{},"Turn your image to a grayscale version using the ",[256,616,611],{}," modifier.",[248,619,621],{"className":527,"code":620,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectGray: true }\"\n\u002F>\n",[256,622,623,629,641,653,667,692],{"__ignoreMap":254},[259,624,625,627],{"class":261,"line":262},[259,626,536],{"class":280},[259,628,539],{"class":287},[259,630,631,633,635,637,639],{"class":261,"line":284},[259,632,545],{"class":544},[259,634,548],{"class":280},[259,636,551],{"class":280},[259,638,554],{"class":318},[259,640,557],{"class":280},[259,642,643,645,647,649,651],{"class":261,"line":297},[259,644,562],{"class":544},[259,646,548],{"class":280},[259,648,551],{"class":280},[259,650,569],{"class":318},[259,652,557],{"class":280},[259,654,655,658,660,662,665],{"class":261,"line":307},[259,656,657],{"class":544},"  height",[259,659,548],{"class":280},[259,661,551],{"class":280},[259,663,664],{"class":318},"300",[259,666,557],{"class":280},[259,668,669,671,673,675,677,679,682,684,688,690],{"class":261,"line":325},[259,670,576],{"class":280},[259,672,579],{"class":544},[259,674,548],{"class":280},[259,676,551],{"class":280},[259,678,586],{"class":280},[259,680,681],{"class":287}," effectGray",[259,683,291],{"class":280},[259,685,687],{"class":686},"sfNiH"," true",[259,689,598],{"class":280},[259,691,557],{"class":280},[259,693,694],{"class":261,"line":331},[259,695,605],{"class":276},[431,697,699],{"id":698},"named",[256,700,698],{},[234,702,703,704,709],{},"Use ",[238,705,708],{"href":706,"rel":707},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fnamed-transformations",[242],"named transformations"," as an alias for an entire transformation string.",[234,711,712,713,716,717,360],{},"For example, we can create a named transformation - ",[256,714,715],{},"media_library_thumbnail"," for a transformation string - ",[256,718,719],{},"tr:w-100,h-100,c-at_max,fo-auto",[431,721,723],{"id":722},"border",[256,724,722],{},[234,726,727,728,730],{},"Add a border to your images using the ",[256,729,722],{}," modifier. You can also set its width and color.",[248,732,734],{"className":527,"code":733,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  width=\"300\"\n  :modifiers=\"{ border: '20_FF0000' }\"\n\u002F>\n",[256,735,736,742,754,766,779,808],{"__ignoreMap":254},[259,737,738,740],{"class":261,"line":262},[259,739,536],{"class":280},[259,741,539],{"class":287},[259,743,744,746,748,750,752],{"class":261,"line":284},[259,745,545],{"class":544},[259,747,548],{"class":280},[259,749,551],{"class":280},[259,751,554],{"class":318},[259,753,557],{"class":280},[259,755,756,758,760,762,764],{"class":261,"line":297},[259,757,562],{"class":544},[259,759,548],{"class":280},[259,761,551],{"class":280},[259,763,569],{"class":318},[259,765,557],{"class":280},[259,767,768,771,773,775,777],{"class":261,"line":307},[259,769,770],{"class":544},"  width",[259,772,548],{"class":280},[259,774,551],{"class":280},[259,776,664],{"class":318},[259,778,557],{"class":280},[259,780,781,783,785,787,789,791,794,796,798,801,804,806],{"class":261,"line":325},[259,782,576],{"class":280},[259,784,579],{"class":544},[259,786,548],{"class":280},[259,788,551],{"class":280},[259,790,586],{"class":280},[259,792,793],{"class":287}," border",[259,795,291],{"class":280},[259,797,315],{"class":280},[259,799,800],{"class":318},"20_FF0000",[259,802,803],{"class":280},"'",[259,805,598],{"class":280},[259,807,557],{"class":280},[259,809,810],{"class":261,"line":331},[259,811,605],{"class":276},[431,813,815],{"id":814},"rotate",[256,816,814],{},[234,818,819,820,822,823,442,826,442,829,442,832,442,835,838,839,360],{},"Use the ",[256,821,814],{}," modifier to rotate your image. Possible values are - ",[256,824,825],{},"0",[256,827,828],{},"90",[256,830,831],{},"180",[256,833,834],{},"270",[256,836,837],{},"360",", and ",[256,840,493],{},[248,842,844],{"className":527,"code":843,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ rotate: 90 }\"\n\u002F>\n",[256,845,846,852,864,876,900],{"__ignoreMap":254},[259,847,848,850],{"class":261,"line":262},[259,849,536],{"class":280},[259,851,539],{"class":287},[259,853,854,856,858,860,862],{"class":261,"line":284},[259,855,545],{"class":544},[259,857,548],{"class":280},[259,859,551],{"class":280},[259,861,554],{"class":318},[259,863,557],{"class":280},[259,865,866,868,870,872,874],{"class":261,"line":297},[259,867,562],{"class":544},[259,869,548],{"class":280},[259,871,551],{"class":280},[259,873,569],{"class":318},[259,875,557],{"class":280},[259,877,878,880,882,884,886,888,891,893,896,898],{"class":261,"line":307},[259,879,576],{"class":280},[259,881,579],{"class":544},[259,883,548],{"class":280},[259,885,551],{"class":280},[259,887,586],{"class":280},[259,889,890],{"class":287}," rotate",[259,892,291],{"class":280},[259,894,895],{"class":594}," 90",[259,897,598],{"class":280},[259,899,557],{"class":280},[259,901,902],{"class":261,"line":325},[259,903,605],{"class":276},[431,905,907],{"id":906},"radius",[256,908,906],{},[234,910,911,912,914,915,360],{},"Give rounded corners to your image using ",[256,913,906],{},". Possible values are - positive integers and ",[256,916,917],{},"max",[248,919,921],{"className":527,"code":920,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  :modifiers=\"{ radius: 20 }\"\n\u002F>\n",[256,922,923,929,941,953,977],{"__ignoreMap":254},[259,924,925,927],{"class":261,"line":262},[259,926,536],{"class":280},[259,928,539],{"class":287},[259,930,931,933,935,937,939],{"class":261,"line":284},[259,932,545],{"class":544},[259,934,548],{"class":280},[259,936,551],{"class":280},[259,938,554],{"class":318},[259,940,557],{"class":280},[259,942,943,945,947,949,951],{"class":261,"line":297},[259,944,562],{"class":544},[259,946,548],{"class":280},[259,948,551],{"class":280},[259,950,569],{"class":318},[259,952,557],{"class":280},[259,954,955,957,959,961,963,965,968,970,973,975],{"class":261,"line":307},[259,956,576],{"class":280},[259,958,579],{"class":544},[259,960,548],{"class":280},[259,962,551],{"class":280},[259,964,586],{"class":280},[259,966,967],{"class":287}," radius",[259,969,291],{"class":280},[259,971,972],{"class":594}," 20",[259,974,598],{"class":280},[259,976,557],{"class":280},[259,978,979],{"class":261,"line":325},[259,980,605],{"class":276},[431,982,984],{"id":983},"bg",[256,985,983],{},[234,987,988,989,617],{},"Specify background color and its opacity for your image using the ",[256,990,983],{},[248,992,994],{"className":527,"code":993,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"1200\"\n  width=\"1200\"\n  fit=\"pad_extract\"\n  :modifiers=\"{ bg: '272B38' }\"\n\u002F>\n",[256,995,996,1002,1014,1026,1039,1051,1064,1092],{"__ignoreMap":254},[259,997,998,1000],{"class":261,"line":262},[259,999,536],{"class":280},[259,1001,539],{"class":287},[259,1003,1004,1006,1008,1010,1012],{"class":261,"line":284},[259,1005,545],{"class":544},[259,1007,548],{"class":280},[259,1009,551],{"class":280},[259,1011,554],{"class":318},[259,1013,557],{"class":280},[259,1015,1016,1018,1020,1022,1024],{"class":261,"line":297},[259,1017,562],{"class":544},[259,1019,548],{"class":280},[259,1021,551],{"class":280},[259,1023,569],{"class":318},[259,1025,557],{"class":280},[259,1027,1028,1030,1032,1034,1037],{"class":261,"line":307},[259,1029,657],{"class":544},[259,1031,548],{"class":280},[259,1033,551],{"class":280},[259,1035,1036],{"class":318},"1200",[259,1038,557],{"class":280},[259,1040,1041,1043,1045,1047,1049],{"class":261,"line":325},[259,1042,770],{"class":544},[259,1044,548],{"class":280},[259,1046,551],{"class":280},[259,1048,1036],{"class":318},[259,1050,557],{"class":280},[259,1052,1053,1056,1058,1060,1062],{"class":261,"line":331},[259,1054,1055],{"class":544},"  fit",[259,1057,548],{"class":280},[259,1059,551],{"class":280},[259,1061,397],{"class":318},[259,1063,557],{"class":280},[259,1065,1066,1068,1070,1072,1074,1076,1079,1081,1083,1086,1088,1090],{"class":261,"line":337},[259,1067,576],{"class":280},[259,1069,579],{"class":544},[259,1071,548],{"class":280},[259,1073,551],{"class":280},[259,1075,586],{"class":280},[259,1077,1078],{"class":287}," bg",[259,1080,291],{"class":280},[259,1082,315],{"class":280},[259,1084,1085],{"class":318},"272B38",[259,1087,803],{"class":280},[259,1089,598],{"class":280},[259,1091,557],{"class":280},[259,1093,1095],{"class":261,"line":1094},8,[259,1096,605],{"class":276},[345,1098,1099],{},[234,1100,1101,1102,360],{},"Read more about ImageKit crop, resize, and other common transformations ",[238,1103,1106],{"href":1104,"rel":1105},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Fresize-crop-and-other-transformations",[242],"here",[362,1108,1110],{"id":1109},"overlay-transformation-modifiers","Overlay Transformation Modifiers",[234,1112,1113,1114,1119,1120,1123,1124,1129,1130,1132],{},"ImageKit's Nuxt Image integration enables you to apply overlays to ",[238,1115,1118],{"href":1116,"rel":1117},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers.md",[242],"images"," using the ",[256,1121,1122],{},"raw"," parameter with the concept of ",[238,1125,1128],{"href":1126,"rel":1127},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers.md#layers",[242],"layers",". The ",[256,1131,1122],{}," parameter facilitates incorporating transformations directly in the URL. A layer is a special type of transformation that allows you to apply text and image overlay along with other transformation parameters.",[431,1134,1136],{"id":1135},"overlay-image","Overlay Image",[234,1138,1139],{},"Overlay an image on top of another image (base image). You can use this to create dynamic banners, watermarking, etc.",[248,1141,1143],{"className":527,"code":1142,"language":529,"meta":254,"style":254},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"imagekit\"\n    src=\"\u002Fdefault-image.jpg\"\n    :modifiers=\"modifiers\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst modifiers = {\n  raw: 'l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end'\n}\n\u003C\u002Fscript>\n",[256,1144,1145,1155,1162,1175,1188,1201,1206,1215,1221,1245,1258,1273,1279],{"__ignoreMap":254},[259,1146,1147,1149,1152],{"class":261,"line":262},[259,1148,536],{"class":280},[259,1150,1151],{"class":287},"template",[259,1153,1154],{"class":280},">\n",[259,1156,1157,1160],{"class":261,"line":284},[259,1158,1159],{"class":280},"  \u003C",[259,1161,539],{"class":287},[259,1163,1164,1167,1169,1171,1173],{"class":261,"line":297},[259,1165,1166],{"class":544},"    provider",[259,1168,548],{"class":280},[259,1170,551],{"class":280},[259,1172,554],{"class":318},[259,1174,557],{"class":280},[259,1176,1177,1180,1182,1184,1186],{"class":261,"line":307},[259,1178,1179],{"class":544},"    src",[259,1181,548],{"class":280},[259,1183,551],{"class":280},[259,1185,569],{"class":318},[259,1187,557],{"class":280},[259,1189,1190,1193,1195,1197,1199],{"class":261,"line":325},[259,1191,1192],{"class":544},"    :modifiers",[259,1194,548],{"class":280},[259,1196,551],{"class":280},[259,1198,579],{"class":318},[259,1200,557],{"class":280},[259,1202,1203],{"class":261,"line":331},[259,1204,1205],{"class":280},"  \u002F>\n",[259,1207,1208,1211,1213],{"class":261,"line":337},[259,1209,1210],{"class":280},"\u003C\u002F",[259,1212,1151],{"class":287},[259,1214,1154],{"class":280},[259,1216,1217],{"class":261,"line":1094},[259,1218,1220],{"emptyLinePlaceholder":1219},true,"\n",[259,1222,1224,1226,1229,1232,1235,1237,1239,1241,1243],{"class":261,"line":1223},9,[259,1225,536],{"class":280},[259,1227,1228],{"class":287},"script",[259,1230,1231],{"class":544}," setup",[259,1233,1234],{"class":544}," lang",[259,1236,548],{"class":280},[259,1238,551],{"class":280},[259,1240,253],{"class":318},[259,1242,551],{"class":280},[259,1244,1154],{"class":280},[259,1246,1248,1251,1254,1256],{"class":261,"line":1247},10,[259,1249,1250],{"class":544},"const",[259,1252,1253],{"class":276}," modifiers ",[259,1255,548],{"class":280},[259,1257,294],{"class":280},[259,1259,1261,1264,1266,1268,1271],{"class":261,"line":1260},11,[259,1262,1263],{"class":287},"  raw",[259,1265,291],{"class":280},[259,1267,315],{"class":280},[259,1269,1270],{"class":318},"l-image,i-default-image.jpg,w-300,h-200,b-5_FFFFFF,fo-top_left,l-end",[259,1272,322],{"class":280},[259,1274,1276],{"class":261,"line":1275},12,[259,1277,1278],{"class":280},"}\n",[259,1280,1282,1284,1286],{"class":261,"line":1281},13,[259,1283,1210],{"class":280},[259,1285,1228],{"class":287},[259,1287,1154],{"class":280},[431,1289,1291],{"id":1290},"overlay-text","Overlay Text",[234,1293,1294],{},"You can overlay text on an image and apply various transformations to it as per your needs.",[248,1296,1298],{"className":527,"code":1297,"language":529,"meta":254,"style":254},"\u003Ctemplate>\n  \u003CNuxtImg\n    provider=\"imagekit\"\n    src=\"\u002Fdefault-image.jpg\"\n    :modifiers=\"modifiers\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst modifiers = {\n  raw: 'l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end'\n}\n\u003C\u002Fscript>\n",[256,1299,1300,1308,1314,1326,1338,1350,1354,1362,1366,1386,1396,1409,1413],{"__ignoreMap":254},[259,1301,1302,1304,1306],{"class":261,"line":262},[259,1303,536],{"class":280},[259,1305,1151],{"class":287},[259,1307,1154],{"class":280},[259,1309,1310,1312],{"class":261,"line":284},[259,1311,1159],{"class":280},[259,1313,539],{"class":287},[259,1315,1316,1318,1320,1322,1324],{"class":261,"line":297},[259,1317,1166],{"class":544},[259,1319,548],{"class":280},[259,1321,551],{"class":280},[259,1323,554],{"class":318},[259,1325,557],{"class":280},[259,1327,1328,1330,1332,1334,1336],{"class":261,"line":307},[259,1329,1179],{"class":544},[259,1331,548],{"class":280},[259,1333,551],{"class":280},[259,1335,569],{"class":318},[259,1337,557],{"class":280},[259,1339,1340,1342,1344,1346,1348],{"class":261,"line":325},[259,1341,1192],{"class":544},[259,1343,548],{"class":280},[259,1345,551],{"class":280},[259,1347,579],{"class":318},[259,1349,557],{"class":280},[259,1351,1352],{"class":261,"line":331},[259,1353,1205],{"class":280},[259,1355,1356,1358,1360],{"class":261,"line":337},[259,1357,1210],{"class":280},[259,1359,1151],{"class":287},[259,1361,1154],{"class":280},[259,1363,1364],{"class":261,"line":1094},[259,1365,1220],{"emptyLinePlaceholder":1219},[259,1367,1368,1370,1372,1374,1376,1378,1380,1382,1384],{"class":261,"line":1223},[259,1369,536],{"class":280},[259,1371,1228],{"class":287},[259,1373,1231],{"class":544},[259,1375,1234],{"class":544},[259,1377,548],{"class":280},[259,1379,551],{"class":280},[259,1381,253],{"class":318},[259,1383,551],{"class":280},[259,1385,1154],{"class":280},[259,1387,1388,1390,1392,1394],{"class":261,"line":1247},[259,1389,1250],{"class":544},[259,1391,1253],{"class":276},[259,1393,548],{"class":280},[259,1395,294],{"class":280},[259,1397,1398,1400,1402,1404,1407],{"class":261,"line":1260},[259,1399,1263],{"class":287},[259,1401,291],{"class":280},[259,1403,315],{"class":280},[259,1405,1406],{"class":318},"l-text,i-overlay made easy,fs-45,co-000000,bg-FFFFFF80,r-30,pa-40,l-end",[259,1408,322],{"class":280},[259,1410,1411],{"class":261,"line":1275},[259,1412,1278],{"class":280},[259,1414,1415,1417,1419],{"class":261,"line":1281},[259,1416,1210],{"class":280},[259,1418,1228],{"class":287},[259,1420,1154],{"class":280},[234,1422,1423,1424,360],{},"Read more about ImageKit's overlay using layers ",[238,1425,1106],{"href":1426,"rel":1427},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations\u002Foverlay-using-layers",[242],[362,1429,1431],{"id":1430},"image-enhancement-modifiers","Image Enhancement Modifiers",[431,1433,1435],{"id":1434},"effectcontrast",[256,1436,1437],{},"effectContrast",[234,1439,1440,1441,617],{},"Enhance contrast of an image using the ",[256,1442,1437],{},[248,1444,1446],{"className":527,"code":1445,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectContrast: true }\"\n\u002F>\n",[256,1447,1448,1454,1466,1478,1490,1513],{"__ignoreMap":254},[259,1449,1450,1452],{"class":261,"line":262},[259,1451,536],{"class":280},[259,1453,539],{"class":287},[259,1455,1456,1458,1460,1462,1464],{"class":261,"line":284},[259,1457,545],{"class":544},[259,1459,548],{"class":280},[259,1461,551],{"class":280},[259,1463,554],{"class":318},[259,1465,557],{"class":280},[259,1467,1468,1470,1472,1474,1476],{"class":261,"line":297},[259,1469,562],{"class":544},[259,1471,548],{"class":280},[259,1473,551],{"class":280},[259,1475,569],{"class":318},[259,1477,557],{"class":280},[259,1479,1480,1482,1484,1486,1488],{"class":261,"line":307},[259,1481,657],{"class":544},[259,1483,548],{"class":280},[259,1485,551],{"class":280},[259,1487,664],{"class":318},[259,1489,557],{"class":280},[259,1491,1492,1494,1496,1498,1500,1502,1505,1507,1509,1511],{"class":261,"line":325},[259,1493,576],{"class":280},[259,1495,579],{"class":544},[259,1497,548],{"class":280},[259,1499,551],{"class":280},[259,1501,586],{"class":280},[259,1503,1504],{"class":287}," effectContrast",[259,1506,291],{"class":280},[259,1508,687],{"class":686},[259,1510,598],{"class":280},[259,1512,557],{"class":280},[259,1514,1515],{"class":261,"line":331},[259,1516,605],{"class":276},[431,1518,1520],{"id":1519},"effectsharpen",[256,1521,1522],{},"effectSharpen",[234,1524,1525,1526,617],{},"Sharpen the input image using the ",[256,1527,1522],{},[248,1529,1531],{"className":527,"code":1530,"language":529,"meta":254,"style":254},"\u003CNuxtImg\n  provider=\"imagekit\"\n  src=\"\u002Fdefault-image.jpg\"\n  height=\"300\"\n  :modifiers=\"{ effectSharpen: 10 }\"\n\u002F>\n",[256,1532,1533,1539,1551,1563,1575,1598],{"__ignoreMap":254},[259,1534,1535,1537],{"class":261,"line":262},[259,1536,536],{"class":280},[259,1538,539],{"class":287},[259,1540,1541,1543,1545,1547,1549],{"class":261,"line":284},[259,1542,545],{"class":544},[259,1544,548],{"class":280},[259,1546,551],{"class":280},[259,1548,554],{"class":318},[259,1550,557],{"class":280},[259,1552,1553,1555,1557,1559,1561],{"class":261,"line":297},[259,1554,562],{"class":544},[259,1556,548],{"class":280},[259,1558,551],{"class":280},[259,1560,569],{"class":318},[259,1562,557],{"class":280},[259,1564,1565,1567,1569,1571,1573],{"class":261,"line":307},[259,1566,657],{"class":544},[259,1568,548],{"class":280},[259,1570,551],{"class":280},[259,1572,664],{"class":318},[259,1574,557],{"class":280},[259,1576,1577,1579,1581,1583,1585,1587,1590,1592,1594,1596],{"class":261,"line":325},[259,1578,576],{"class":280},[259,1580,579],{"class":544},[259,1582,548],{"class":280},[259,1584,551],{"class":280},[259,1586,586],{"class":280},[259,1588,1589],{"class":287}," effectSharpen",[259,1591,291],{"class":280},[259,1593,595],{"class":594},[259,1595,598],{"class":280},[259,1597,557],{"class":280},[259,1599,1600],{"class":261,"line":331},[259,1601,605],{"class":276},[362,1603,1605],{"id":1604},"list-of-supported-transforms","List of supported transforms",[234,1607,1608],{},"ImageKit's Nuxt Image integration provides an easy-to-remember name for each transformation parameter. It makes your code more readable. If you use a property that does not match any of the following supported options, it will be added in the URL as it is.",[1610,1611,1612,1625],"table",{},[1613,1614,1615],"thead",{},[1616,1617,1618,1622],"tr",{},[1619,1620,1621],"th",{},"Supported Parameter Name",[1619,1623,1624],{},"Translates to Parameter",[1626,1627,1628,1635,1643,1650,1657,1664,1671,1678,1685,1692,1699,1707,1715,1722,1729,1736,1743,1750,1757,1765,1773,1781,1789,1797,1805,1812,1819,1827,1834,1841],"tbody",{},[1616,1629,1630,1633],{},[1631,1632,983],"td",{},[1631,1634,983],{},[1616,1636,1637,1640],{},[1631,1638,1639],{},"aspectRatio",[1631,1641,1642],{},"ar",[1616,1644,1645,1648],{},[1631,1646,1647],{},"x",[1631,1649,1647],{},[1616,1651,1652,1655],{},[1631,1653,1654],{},"y",[1631,1656,1654],{},[1616,1658,1659,1662],{},[1631,1660,1661],{},"xc",[1631,1663,1661],{},[1616,1665,1666,1669],{},[1631,1667,1668],{},"yc",[1631,1670,1668],{},[1616,1672,1673,1676],{},[1631,1674,1675],{},"oix",[1631,1677,1675],{},[1616,1679,1680,1683],{},[1631,1681,1682],{},"oiy",[1631,1684,1682],{},[1616,1686,1687,1690],{},[1631,1688,1689],{},"oixc",[1631,1691,1689],{},[1616,1693,1694,1697],{},[1631,1695,1696],{},"oiyc",[1631,1698,1696],{},[1616,1700,1701,1704],{},[1631,1702,1703],{},"crop",[1631,1705,1706],{},"c",[1616,1708,1709,1712],{},[1631,1710,1711],{},"cropMode",[1631,1713,1714],{},"cm",[1616,1716,1717,1719],{},[1631,1718,433],{},[1631,1720,1721],{},"fo",[1616,1723,1724,1726],{},[1631,1725,906],{},[1631,1727,1728],{},"r",[1616,1730,1731,1733],{},[1631,1732,722],{},[1631,1734,1735],{},"b",[1616,1737,1738,1740],{},[1631,1739,814],{},[1631,1741,1742],{},"rt",[1616,1744,1745,1747],{},[1631,1746,509],{},[1631,1748,1749],{},"bl",[1616,1751,1752,1754],{},[1631,1753,698],{},[1631,1755,1756],{},"n",[1616,1758,1759,1762],{},[1631,1760,1761],{},"progressive",[1631,1763,1764],{},"pr",[1616,1766,1767,1770],{},[1631,1768,1769],{},"lossless",[1631,1771,1772],{},"lo",[1616,1774,1775,1778],{},[1631,1776,1777],{},"trim",[1631,1779,1780],{},"t",[1616,1782,1783,1786],{},[1631,1784,1785],{},"metadata",[1631,1787,1788],{},"md",[1616,1790,1791,1794],{},[1631,1792,1793],{},"colorProfile",[1631,1795,1796],{},"cp",[1616,1798,1799,1802],{},[1631,1800,1801],{},"defaultImage",[1631,1803,1804],{},"di",[1616,1806,1807,1810],{},[1631,1808,1809],{},"dpr",[1631,1811,1809],{},[1616,1813,1814,1816],{},[1631,1815,1522],{},[1631,1817,1818],{},"e-sharpen",[1616,1820,1821,1824],{},[1631,1822,1823],{},"effectUSM",[1631,1825,1826],{},"e-usm",[1616,1828,1829,1831],{},[1631,1830,1437],{},[1631,1832,1833],{},"e-contrast",[1616,1835,1836,1838],{},[1631,1837,611],{},[1631,1839,1840],{},"e-grayscale",[1616,1842,1843,1846],{},[1631,1844,1845],{},"original",[1631,1847,1848],{},"orig",[345,1850,1851],{},[234,1852,1853,1854,1859],{},"Learn more about ",[238,1855,1858],{"href":1856,"rel":1857},"https:\u002F\u002Fdocs.imagekit.io\u002Ffeatures\u002Fimage-transformations",[242],"ImageKit's Image transformations"," from the official documentation.",[1861,1862,1863],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":254,"searchDepth":284,"depth":284,"links":1865},[1866,1868,1878,1882,1886],{"id":364,"depth":284,"text":1867},"ImageKit fit Parameters",{"id":416,"depth":284,"text":417,"children":1869},[1870,1871,1872,1873,1874,1875,1876,1877],{"id":433,"depth":297,"text":433},{"id":509,"depth":297,"text":509},{"id":608,"depth":297,"text":611},{"id":698,"depth":297,"text":698},{"id":722,"depth":297,"text":722},{"id":814,"depth":297,"text":814},{"id":906,"depth":297,"text":906},{"id":983,"depth":297,"text":983},{"id":1109,"depth":284,"text":1110,"children":1879},[1880,1881],{"id":1135,"depth":297,"text":1136},{"id":1290,"depth":297,"text":1291},{"id":1430,"depth":284,"text":1431,"children":1883},[1884,1885],{"id":1434,"depth":297,"text":1437},{"id":1519,"depth":297,"text":1522},{"id":1604,"depth":284,"text":1605},"Nuxt Image has first class integration with ImageKit.",[1889],{"label":1890,"icon":1891,"to":1892,"size":1893},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fimagekit.ts","xs",{},{"title":132,"description":1887},"bmKyZi4HALWBIzsgSrW9KHZXRvotpN0FX-BxSFB7tLg",[1898,1900],{"title":128,"path":129,"stem":130,"description":1899,"children":-1},"Nuxt Image has first class integration with ImageEngine.",{"title":136,"path":137,"stem":138,"description":1901,"children":-1},"Nuxt Image has first class integration with Imgix.",1784666089071]