[{"data":1,"prerenderedAt":613},["ShallowReactive",2],{"navigation_docs":3,"-providers-strapi":212,"-providers-strapi-surround":608},[4,30,47,199],{"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],{"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},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":108,"path":109,"stem":110},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":112,"path":113,"stem":114},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":116,"path":117,"stem":118},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":120,"path":121,"stem":122},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":124,"path":125,"stem":126},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":128,"path":129,"stem":130},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":132,"path":133,"stem":134},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":136,"path":137,"stem":138},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":140,"path":141,"stem":142},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":144,"path":145,"stem":146},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":148,"path":149,"stem":150},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":152,"path":153,"stem":154},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":156,"path":157,"stem":158},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":160,"path":161,"stem":162},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":164,"path":165,"stem":166},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":168,"path":169,"stem":170},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":172,"path":173,"stem":174},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":176,"path":177,"stem":178},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":180,"path":181,"stem":182},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":184,"path":185,"stem":186},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":188,"path":189,"stem":190},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":192,"path":193,"stem":194},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":196,"path":197,"stem":198},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":200,"path":201,"stem":202,"children":203,"page":29},"Advanced","\u002Fadvanced","4.advanced",[204,208],{"title":205,"path":206,"stem":207},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":209,"path":210,"stem":211},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":213,"title":172,"body":214,"description":596,"extension":597,"links":598,"meta":604,"navigation":605,"path":173,"seo":606,"stem":174,"__hash__":607},"docs\u002F3.providers\u002Fstrapi.md",{"type":215,"value":216,"toc":593},"minimark",[217,228,236,309,312,379,384,391,399,449,458,461,512,515,585,589],[218,219,220,221,227],"p",{},"Integration between ",[222,223,172],"a",{"href":224,"rel":225},"https:\u002F\u002Fstrapi.io",[226],"nofollow"," and the image module.",[218,229,230,231,235],{},"No specific configuration is required. You just need to specify ",[232,233,234],"code",{},"strapi"," in your configuration to make it the default:",[237,238,244],"pre",{"className":239,"code":240,"filename":241,"language":242,"meta":243,"style":243},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    strapi: {}\n  }\n})\n","nuxt.config.ts","ts","",[232,245,246,270,283,294,300],{"__ignoreMap":243},[247,248,251,255,258,262,266],"span",{"class":249,"line":250},"line",1,[247,252,254],{"class":253},"s7zQu","export",[247,256,257],{"class":253}," default",[247,259,261],{"class":260},"s2Zo4"," defineNuxtConfig",[247,263,265],{"class":264},"sTEyZ","(",[247,267,269],{"class":268},"sMK4o","{\n",[247,271,273,277,280],{"class":249,"line":272},2,[247,274,276],{"class":275},"swJcz","  image",[247,278,279],{"class":268},":",[247,281,282],{"class":268}," {\n",[247,284,286,289,291],{"class":249,"line":285},3,[247,287,288],{"class":275},"    strapi",[247,290,279],{"class":268},[247,292,293],{"class":268}," {}\n",[247,295,297],{"class":249,"line":296},4,[247,298,299],{"class":268},"  }\n",[247,301,303,306],{"class":249,"line":302},5,[247,304,305],{"class":268},"}",[247,307,308],{"class":264},")\n",[218,310,311],{},"Override default options:",[237,313,315],{"className":239,"code":314,"filename":241,"language":242,"meta":243,"style":243},"export default defineNuxtConfig({\n  image: {\n    strapi: {\n      baseURL: 'http:\u002F\u002Flocalhost:1337\u002Fuploads'\n    }\n  }\n})\n",[232,316,317,329,337,345,362,367,372],{"__ignoreMap":243},[247,318,319,321,323,325,327],{"class":249,"line":250},[247,320,254],{"class":253},[247,322,257],{"class":253},[247,324,261],{"class":260},[247,326,265],{"class":264},[247,328,269],{"class":268},[247,330,331,333,335],{"class":249,"line":272},[247,332,276],{"class":275},[247,334,279],{"class":268},[247,336,282],{"class":268},[247,338,339,341,343],{"class":249,"line":285},[247,340,288],{"class":275},[247,342,279],{"class":268},[247,344,282],{"class":268},[247,346,347,350,352,355,359],{"class":249,"line":296},[247,348,349],{"class":275},"      baseURL",[247,351,279],{"class":268},[247,353,354],{"class":268}," '",[247,356,358],{"class":357},"sfazB","http:\u002F\u002Flocalhost:1337\u002Fuploads",[247,360,361],{"class":268},"'\n",[247,363,364],{"class":249,"line":302},[247,365,366],{"class":268},"    }\n",[247,368,370],{"class":249,"line":369},6,[247,371,299],{"class":268},[247,373,375,377],{"class":249,"line":374},7,[247,376,305],{"class":268},[247,378,308],{"class":264},[380,381,383],"h2",{"id":382},"modifiers","Modifiers",[218,385,386,387,390],{},"The ",[232,388,389],{},"breakpoint"," modifier is used to specify the size of the image.",[218,392,393,394,398],{},"By default, when the image is uploaded and ",[395,396,397],"strong",{},"Enable responsive friendly upload"," Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:",[400,401,402,415],"table",{},[403,404,405],"thead",{},[406,407,408,412],"tr",{},[409,410,411],"th",{},"Name",[409,413,414],{},"Largest Dimension",[416,417,418,429,439],"tbody",{},[406,419,420,426],{},[421,422,423],"td",{},[232,424,425],{},"small",[421,427,428],{},"500px",[406,430,431,436],{},[421,432,433],{},[232,434,435],{},"medium",[421,437,438],{},"750px",[406,440,441,446],{},[421,442,443],{},[232,444,445],{},"large",[421,447,448],{},"1000px",[218,450,451,452,457],{},"You can override the default breakpoints. See the ",[222,453,456],{"href":454,"rel":455},"https:\u002F\u002Fdocs.strapi.io\u002Fdev-docs\u002Fplugins\u002Fupload#configuration",[226],"Upload configuration"," in the Strapi documentation.",[218,459,460],{},"If you don't set breakpoint modifier, the original image size will be used:",[237,462,466],{"className":463,"code":464,"language":465,"meta":243,"style":243},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"strapi\"\n  src=\"...\"\n\u002F>\n","vue",[232,467,468,476,493,507],{"__ignoreMap":243},[247,469,470,473],{"class":249,"line":250},[247,471,472],{"class":268},"\u003C",[247,474,475],{"class":275},"NuxtImg\n",[247,477,478,482,485,488,490],{"class":249,"line":272},[247,479,481],{"class":480},"spNyl","  provider",[247,483,484],{"class":268},"=",[247,486,487],{"class":268},"\"",[247,489,234],{"class":357},[247,491,492],{"class":268},"\"\n",[247,494,495,498,500,502,505],{"class":249,"line":285},[247,496,497],{"class":480},"  src",[247,499,484],{"class":268},[247,501,487],{"class":268},[247,503,504],{"class":357},"...",[247,506,492],{"class":268},[247,508,509],{"class":249,"line":296},[247,510,511],{"class":264},"\u002F>\n",[218,513,514],{},"Define breakpoint modifier:",[237,516,518],{"className":463,"code":517,"language":465,"meta":243,"style":243},"\u003CNuxtImg\n  provider=\"strapi\"\n  src=\"...\"\n  :modifiers=\"{ breakpoint: 'small' }\"\n\u002F>\n",[232,519,520,526,538,550,581],{"__ignoreMap":243},[247,521,522,524],{"class":249,"line":250},[247,523,472],{"class":268},[247,525,475],{"class":275},[247,527,528,530,532,534,536],{"class":249,"line":272},[247,529,481],{"class":480},[247,531,484],{"class":268},[247,533,487],{"class":268},[247,535,234],{"class":357},[247,537,492],{"class":268},[247,539,540,542,544,546,548],{"class":249,"line":285},[247,541,497],{"class":480},[247,543,484],{"class":268},[247,545,487],{"class":268},[247,547,504],{"class":357},[247,549,492],{"class":268},[247,551,552,555,557,559,561,564,567,569,571,573,576,579],{"class":249,"line":296},[247,553,554],{"class":268},"  :",[247,556,382],{"class":480},[247,558,484],{"class":268},[247,560,487],{"class":268},[247,562,563],{"class":268},"{",[247,565,566],{"class":275}," breakpoint",[247,568,279],{"class":268},[247,570,354],{"class":268},[247,572,425],{"class":357},[247,574,575],{"class":268},"'",[247,577,578],{"class":268}," }",[247,580,492],{"class":268},[247,582,583],{"class":249,"line":302},[247,584,511],{"class":264},[586,587,588],"note",{},"Only one breakpoint can be modified per image.",[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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":243,"searchDepth":272,"depth":272,"links":594},[595],{"id":382,"depth":272,"text":383},"Nuxt Image with Strapi integration.","md",[599],{"label":600,"icon":601,"to":602,"size":603},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fstrapi.ts","xs",{},true,{"title":172,"description":596},"Y-x_BxHOQG7fUfZSsZI6usLzaDSzQ7APE4OOmZoOdQc",[609,611],{"title":168,"path":169,"stem":170,"description":610,"children":-1},"Nuxt Image internally use Storyblok as static provider.",{"title":176,"path":177,"stem":178,"description":612,"children":-1},"Nuxt Image with Supabase Storage integration.",1775043896235]