[{"_path":"/providers/sanity","_draft":false,"_partial":false,"_empty":false,"title":"Sanity","description":"Nuxt Image has first class integration with Sanity","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sanity"}]},{"type":"text","value":" and Nuxt Image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"projectId"}]},{"type":"text","value":" of your project in Sanity."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    sanity: {\n      projectId: 'yourprojectid',\n      // Defaults to 'production'\n      // dataset: 'development'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    sanity: {\n      projectId: 'yourprojectid',\n      // Defaults to 'production'\n      // dataset: 'development'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Sanity provider supports a number of additional modifiers. For a full list, check out "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"the Sanity documentation"}]},{"type":"text","value":". All of the modifiers mentioned in the Sanity docs are supported, with the following notes."}]},{"type":"element","tag":"h3","props":{"id":"extra-convenience-modifiers"},"children":[{"type":"text","value":"Extra convenience modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following more readable modifiers are also supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"download"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dl"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"orientation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"saturation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sat"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the values specified in the Sanity docs, which are respected, the following options from the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"default fit behavior"}]},{"type":"text","value":" are supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":", and defaults to filling with a white background. (You can specify your own background color with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" modifier.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"scale"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For compatibility with other providers, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: fill"}]},{"type":"text","value":" is equivalent to the Sanity parameter "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=scale"}]},{"type":"text","value":". If you need the Sanity "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=fill"}]},{"type":"text","value":" behavior, use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: contain"}]},{"type":"text","value":" instead."}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop-and-hotspot"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hotspot"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rect"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-x"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-y"}]},{"type":"text","value":" parameters for you."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Sanity"}]},{"type":"text","value":" and Nuxt Image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use this provider you just need to specify the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"projectId"}]},{"type":"text","value":" of your project in Sanity."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    sanity: {\n      projectId: 'yourprojectid',\n      // Defaults to 'production'\n      // dataset: 'development'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6119c3"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6119c3"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"sanity"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-595ded"},"children":[{"type":"text","value":"projectId"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-5f273b"},"children":[{"type":"text","value":"'yourprojectid'"}]},{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-d200c3"},"children":[{"type":"text","value":"// Defaults to 'production'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-d200c3"},"children":[{"type":"text","value":"// dataset: 'development'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bf12"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Sanity provider supports a number of additional modifiers. For a full list, check out "},{"type":"element","tag":"a","props":{"href":"https://www.sanity.io/docs/image-urls","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"the Sanity documentation"}]},{"type":"text","value":". All of the modifiers mentioned in the Sanity docs are supported, with the following notes."}]},{"type":"element","tag":"h3","props":{"id":"extra-convenience-modifiers"},"children":[{"type":"text","value":"Extra convenience modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following more readable modifiers are also supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bg"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"download"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"dl"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharpen"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sharp"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"orientation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"or"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxHeight"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-height"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-h"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"minWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"maxWidth"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-width"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max-w"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"saturation"}]},{"type":"text","value":" - equivalent to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sat"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the values specified in the Sanity docs, which are respected, the following options from the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"default fit behavior"}]},{"type":"text","value":" are supported:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"cover"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"contain"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":", and defaults to filling with a white background. (You can specify your own background color with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" modifier.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"min"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"outside"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"max"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fill"}]},{"type":"text","value":" - this will behave like the Sanity modifier "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"scale"}]}]}]},{"type":"element","tag":"alert","props":{"type":"warning"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For compatibility with other providers, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: fill"}]},{"type":"text","value":" is equivalent to the Sanity parameter "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=scale"}]},{"type":"text","value":". If you need the Sanity "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"?fit=fill"}]},{"type":"text","value":" behavior, use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit: contain"}]},{"type":"text","value":" instead."}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto=format"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop-and-hotspot"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"hotspot"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"rect"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-x"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fp-y"}]},{"type":"text","value":" parameters for you."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d200c3{color:#7F848E}.ct-5f273b{color:#98C379}.ct-595ded{color:#E06C75}.ct-94bf12{color:#ABB2BF}.ct-6119c3{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers","children":[{"id":"extra-convenience-modifiers","depth":3,"text":"Extra convenience modifiers"},{"id":"fit","depth":3,"text":"fit"},{"id":"format","depth":3,"text":"format"},{"id":"crop-and-hotspot","depth":3,"text":"crop and hotspot"}]}]}},"_type":"markdown","_id":"content:4.providers:sanity.md","_source":"content","_file":"4.providers/sanity.md","_extension":"md"},{"_path":"/providers/strapi","_draft":false,"_partial":false,"_empty":false,"title":"Strapi","description":"Nuxt Image with Strapi integration","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://strapi.io","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strapi"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    strapi: {}\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    strapi: {}\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Override default options:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    strapi: {\n      baseURL: 'http://localhost:1337/uploads/'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    strapi: {\n      baseURL: 'http://localhost:1337/uploads/'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"breakpoint"}]},{"type":"text","value":" modifier is used to specify the size of the image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, when the image is uploaded and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Enable responsive friendly upload"}]},{"type":"text","value":" Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Largest Dimension"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"small"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"medium"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"750px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"large"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1000px"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override the default breakpoints. See the "},{"type":"element","tag":"a","props":{"href":"https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Upload configuration"}]},{"type":"text","value":" in the Strapi documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don't set breakpoint modifier, the original image size will be used:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"strapi\" src=\"...\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img provider=\"strapi\" src=\"...\" />\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Define breakpoint modifier:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"strapi\" src=\"...\" :modifiers=\"{ breakpoint: 'small' }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img provider=\"strapi\" src=\"...\" :modifiers=\"{ breakpoint: 'small' }\" />\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one breakpoint can be modified per image."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://strapi.io","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Strapi"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"strapi"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    strapi: {}\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"strapi"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Override default options:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    strapi: {\n      baseURL: 'http://localhost:1337/uploads/'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-71d844"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"strapi"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"'http://localhost:1337/uploads/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"modifiers"},"children":[{"type":"text","value":"Modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"breakpoint"}]},{"type":"text","value":" modifier is used to specify the size of the image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, when the image is uploaded and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Enable responsive friendly upload"}]},{"type":"text","value":" Strapi setting is enabled in the settings panel the plugin will generate the following responsive image sizes:"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Largest Dimension"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"small"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"500px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"medium"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"750px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"large"}]}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"1000px"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can override the default breakpoints. See the "},{"type":"element","tag":"a","props":{"href":"https://strapi.io/documentation/developer-docs/latest/development/plugins/upload.html#configuration","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Upload configuration"}]},{"type":"text","value":" in the Strapi documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don't set breakpoint modifier, the original image size will be used:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"strapi\" src=\"...\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"strapi\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Define breakpoint modifier:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"strapi\" src=\"...\" :modifiers=\"{ breakpoint: 'small' }\" />\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-7cb7e8"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"strapi\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52deb8"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1d8f90"},"children":[{"type":"text","value":"\"{ breakpoint: 'small' }\""}]},{"type":"element","tag":"span","props":{"class":"ct-7cf262"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one breakpoint can be modified per image."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-52deb8{color:#D19A66}.ct-1d8f90{color:#98C379}.ct-7cb7e8{color:#E06C75}.ct-7cf262{color:#ABB2BF}.ct-71d844{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"modifiers","depth":2,"text":"Modifiers"}]}},"_type":"markdown","_id":"content:4.providers:strapi.md","_source":"content","_file":"4.providers/strapi.md","_extension":"md"}]