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