{"_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"}