[{"data":1,"prerenderedAt":617},["ShallowReactive",2],{"navigation_docs":3,"-providers-imgix":220,"-providers-imgix-surround":612},[4,30,47,207],{"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],{"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},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":100,"path":101,"stem":102},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":104,"path":105,"stem":106},"Flyimg","\u002Fproviders\u002Fflyimg","3.providers\u002Fflyimg",{"title":108,"path":109,"stem":110},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":112,"path":113,"stem":114},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":116,"path":117,"stem":118},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":120,"path":121,"stem":122},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":124,"path":125,"stem":126},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":128,"path":129,"stem":130},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":132,"path":133,"stem":134},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":136,"path":137,"stem":138},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":140,"path":141,"stem":142},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":144,"path":145,"stem":146},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":148,"path":149,"stem":150},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":152,"path":153,"stem":154},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":156,"path":157,"stem":158},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":160,"path":161,"stem":162},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":164,"path":165,"stem":166},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":168,"path":169,"stem":170},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":172,"path":173,"stem":174},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":176,"path":177,"stem":178},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":180,"path":181,"stem":182},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":184,"path":185,"stem":186},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":188,"path":189,"stem":190},"Umbraco","\u002Fproviders\u002Fumbraco","3.providers\u002Fumbraco",{"title":192,"path":193,"stem":194},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":196,"path":197,"stem":198},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":200,"path":201,"stem":202},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":204,"path":205,"stem":206},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":208,"path":209,"stem":210,"children":211,"page":29},"Advanced","\u002Fadvanced","4.advanced",[212,216],{"title":213,"path":214,"stem":215},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":217,"path":218,"stem":219},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":221,"title":132,"body":222,"description":600,"extension":601,"links":602,"meta":608,"navigation":609,"path":133,"seo":610,"stem":134,"__hash__":611},"docs\u002F3.providers\u002Fimgix.md",{"type":223,"value":224,"toc":593},"minimark",[225,236,239,336,345,356,396,400,411,420,424,427,569,577,581,589],[226,227,228,229,235],"p",{},"Integration between ",[230,231,132],"a",{"href":232,"rel":233},"https:\u002F\u002Fdocs.imgix.com",[234],"nofollow"," and the image module.",[226,237,238],{},"To use this provider you just need to specify the base URL of your service in Imgix.",[240,241,247],"pre",{"className":242,"code":243,"filename":244,"language":245,"meta":246,"style":246},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    imgix: {\n      baseURL: 'https:\u002F\u002Fassets.imgix.net'\n    }\n  }\n})\n","nuxt.config.ts","ts","",[248,249,250,274,287,297,315,321,327],"code",{"__ignoreMap":246},[251,252,255,259,262,266,270],"span",{"class":253,"line":254},"line",1,[251,256,258],{"class":257},"s7zQu","export",[251,260,261],{"class":257}," default",[251,263,265],{"class":264},"s2Zo4"," defineNuxtConfig",[251,267,269],{"class":268},"sTEyZ","(",[251,271,273],{"class":272},"sMK4o","{\n",[251,275,277,281,284],{"class":253,"line":276},2,[251,278,280],{"class":279},"swJcz","  image",[251,282,283],{"class":272},":",[251,285,286],{"class":272}," {\n",[251,288,290,293,295],{"class":253,"line":289},3,[251,291,292],{"class":279},"    imgix",[251,294,283],{"class":272},[251,296,286],{"class":272},[251,298,300,303,305,308,312],{"class":253,"line":299},4,[251,301,302],{"class":279},"      baseURL",[251,304,283],{"class":272},[251,306,307],{"class":272}," '",[251,309,311],{"class":310},"sfazB","https:\u002F\u002Fassets.imgix.net",[251,313,314],{"class":272},"'\n",[251,316,318],{"class":253,"line":317},5,[251,319,320],{"class":272},"    }\n",[251,322,324],{"class":253,"line":323},6,[251,325,326],{"class":272},"  }\n",[251,328,330,333],{"class":253,"line":329},7,[251,331,332],{"class":272},"}",[251,334,335],{"class":268},")\n",[337,338,340,341,344],"h2",{"id":339},"imgix-fit-values","Imgix ",[248,342,343],{},"fit"," Values",[226,346,347,348,355],{},"Beside the ",[230,349,351,352,354],{"href":350},"\u002Fusage\u002Fnuxt-img#fit","standard values for ",[248,353,343],{}," property"," of Nuxt image and Nuxt picture, Imgix offers the following for extra resizing experience:",[357,358,359,366,372,390],"ul",{},[360,361,362,365],"li",{},[248,363,364],{},"clamp"," - Resizes the image to fit within the width and height dimensions without cropping or distorting the image, and the remaining space is filled with extended pixels from the edge of the image. The resulting image will match the constraining dimensions. The pixel extension is called an affine clamp, hence the value name, 'clamp'.",[360,367,368,371],{},[248,369,370],{},"clip"," - The default fit setting for Imgix images. Resizes the image to fit within the width and height boundaries without cropping or distorting the image. The resulting image will match one of the constraining dimensions, while the other dimension is altered to maintain the same aspect ratio of the input image.",[360,373,374,377,378,383,384,389],{},[248,375,376],{},"facearea"," - Finds the area containing all faces, or a specific face in an image, and scales it to specified width and height dimensions. Can be used in conjunction with ",[230,379,382],{"href":380,"rel":381},"https:\u002F\u002Fdocs.imgix.com\u002Fapis\u002Frendering\u002Fface-detection\u002Ffaceindex",[234],"faceindex"," to identify a specific face, as well as ",[230,385,388],{"href":386,"rel":387},"https:\u002F\u002Fdocs.imgix.com\u002Fapis\u002Frendering\u002Fface-detection\u002Ffacepad",[234],"facepad"," to include additional padded area around the face to zoom out from the immediate area around the faces.",[360,391,392,395],{},[248,393,394],{},"fillMax"," - Resizes the image to fit within the requested width and height dimensions while preserving the original aspect ratio and without discarding any original image data. If the requested width or height exceeds that of the original, the original image remains the same size. The excess space is filled with a solid color or blurred version of the image. The resulting image exactly matches the requested dimensions.",[337,397,399],{"id":398},"imgix-modifiers","Imgix Modifiers",[226,401,347,402,406,407,410],{},[230,403,405],{"href":404},"\u002Fusage\u002Fnuxt-img#modifiers","standard modifiers",", you can also pass all Imgix-specific render API parameters to the ",[248,408,409],{},"modifiers"," prop.",[226,412,413,414,419],{},"For a full list of these modifiers and their uses, check out ",[230,415,418],{"href":416,"rel":417},"https:\u002F\u002Fdocs.imgix.com\u002Fapis\u002Frendering",[234],"Imgix's image rendering API documentation",".",[337,421,423],{"id":422},"imgix-best-practices","Imgix Best Practices",[226,425,426],{},"Some common best practices when using Imgix, would be to include our auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!",[240,428,432],{"className":429,"code":430,"language":431,"meta":246,"style":246},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"imgix\"\n  src=\"\u002Fblog\u002Fwoman-hat.jpg\"\n  width=\"300\"\n  height=\"500\"\n  fit=\"cover\"\n  :modifiers=\"{ auto: 'format,compress', crop: 'faces' }\"\n\u002F>\n","vue",[248,433,434,442,460,474,488,502,516,563],{"__ignoreMap":246},[251,435,436,439],{"class":253,"line":254},[251,437,438],{"class":272},"\u003C",[251,440,441],{"class":279},"NuxtImg\n",[251,443,444,448,451,454,457],{"class":253,"line":276},[251,445,447],{"class":446},"spNyl","  provider",[251,449,450],{"class":272},"=",[251,452,453],{"class":272},"\"",[251,455,456],{"class":310},"imgix",[251,458,459],{"class":272},"\"\n",[251,461,462,465,467,469,472],{"class":253,"line":289},[251,463,464],{"class":446},"  src",[251,466,450],{"class":272},[251,468,453],{"class":272},[251,470,471],{"class":310},"\u002Fblog\u002Fwoman-hat.jpg",[251,473,459],{"class":272},[251,475,476,479,481,483,486],{"class":253,"line":299},[251,477,478],{"class":446},"  width",[251,480,450],{"class":272},[251,482,453],{"class":272},[251,484,485],{"class":310},"300",[251,487,459],{"class":272},[251,489,490,493,495,497,500],{"class":253,"line":317},[251,491,492],{"class":446},"  height",[251,494,450],{"class":272},[251,496,453],{"class":272},[251,498,499],{"class":310},"500",[251,501,459],{"class":272},[251,503,504,507,509,511,514],{"class":253,"line":323},[251,505,506],{"class":446},"  fit",[251,508,450],{"class":272},[251,510,453],{"class":272},[251,512,513],{"class":310},"cover",[251,515,459],{"class":272},[251,517,518,521,523,525,527,530,533,535,537,540,543,546,549,551,553,556,558,561],{"class":253,"line":329},[251,519,520],{"class":272},"  :",[251,522,409],{"class":446},[251,524,450],{"class":272},[251,526,453],{"class":272},[251,528,529],{"class":272},"{",[251,531,532],{"class":279}," auto",[251,534,283],{"class":272},[251,536,307],{"class":272},[251,538,539],{"class":310},"format,compress",[251,541,542],{"class":272},"'",[251,544,545],{"class":272},",",[251,547,548],{"class":279}," crop",[251,550,283],{"class":272},[251,552,307],{"class":272},[251,554,555],{"class":310},"faces",[251,557,542],{"class":272},[251,559,560],{"class":272}," }",[251,562,459],{"class":272},[251,564,566],{"class":253,"line":565},8,[251,567,568],{"class":268},"\u002F>\n",[226,570,571,572,419],{},"This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the ",[230,573,576],{"href":574,"rel":575},"https:\u002F\u002Fassets.imgix.net\u002Fblog\u002Fwoman-hat.jpg?w=300&h=500&fit=crop&crop=faces",[234],"woman in the hat",[337,578,580],{"id":579},"additional-documentation","Additional Documentation",[226,582,583,584,419],{},"You can find additional documentation and a step-by-step tutorial in an Imgix blog article titled ",[230,585,588],{"href":586,"rel":587},"https:\u002F\u002Fblog.imgix.com\u002F2021\u002F09\u002F14\u002Fnuxt-image-component",[234],"Using the New Nuxt Component with Imgix",[590,591,592],"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}",{"title":246,"searchDepth":276,"depth":276,"links":594},[595,597,598,599],{"id":339,"depth":276,"text":596},"Imgix fit Values",{"id":398,"depth":276,"text":399},{"id":422,"depth":276,"text":423},{"id":579,"depth":276,"text":580},"Nuxt Image has first class integration with Imgix.","md",[603],{"label":604,"icon":605,"to":606,"size":607},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fimgix.ts","xs",{},true,{"title":132,"description":600},"KJHbdkd_53WtvcP0gHHesPn7tuKzoX8QR52S6HSNLjA",[613,615],{"title":128,"path":129,"stem":130,"description":614,"children":-1},"Nuxt Image has first class integration with ImageKit.",{"title":136,"path":137,"stem":138,"description":616,"children":-1},"IPX is the built-in and self hosted image optimizer for Nuxt Image.",1775283768358]