{"_path":"/getting-started/providers","_draft":false,"_partial":false,"_empty":false,"title":"Providers","description":"Nuxt Image supports multiple providers for high performances.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are looking for a specific provider that is not already supported, you can "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"create your own provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image will automatically optimize "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" sources and accepts all "},{"type":"element","tag":"a","props":{"href":"/api/options/"},"children":[{"type":"text","value":"options"}]},{"type":"text","value":" for specified target, except for modifiers that are specific to other providers."}]},{"type":"element","tag":"h2","props":{"id":"default-provider"},"children":[{"type":"text","value":"Default Provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default provider for Nuxt Image is "},{"type":"element","tag":"a","props":{"href":"/providers/ipx"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/getting-started/static"},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: static"}]},{"type":"text","value":"). Either option can be used without any configuration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/features/deployment-targets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Learn more about Nuxt deployment targets"}]}]},{"type":"element","tag":"h3","props":{"id":"local-images"},"children":[{"type":"text","value":"Local Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should be stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory of your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, when using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt-icon.png\" />"}]},{"type":"text","value":", it should be placed in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" folder under the path "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/nuxt-icon.png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/"}]},{"type":"text","value":" directory are "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" proccessed with Nuxt Image because those images are managed by webpack."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information, you can learn more about the "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/directory-structure/static","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static directory here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using default provider, you can also optimize external URLs. For this, you need to add them to "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"environment-detection"},"children":[{"type":"text","value":"Environment Detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default provider using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NUXT_IMAGE_PROVIDER"}]},{"type":"text","value":" environment variable. Providers below, are automatically detected:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/providers/vercel"},"children":[{"type":"text","value":"Vercel"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Providers are integrations between Nuxt Image and third-party image transformation services. Each provider is responsible for generating correct URLs for that image transformation service."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image can be configured to work with any external image transformation service. Checkout sidebar for list of preconfigured providers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are looking for a specific provider that is not already supported, you can "},{"type":"element","tag":"a","props":{"href":"/advanced/custom-provider"},"children":[{"type":"text","value":"create your own provider"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt Image will automatically optimize "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img>"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-picture>"}]},{"type":"text","value":" sources and accepts all "},{"type":"element","tag":"a","props":{"href":"/api/options/"},"children":[{"type":"text","value":"options"}]},{"type":"text","value":" for specified target, except for modifiers that are specific to other providers."}]},{"type":"element","tag":"h2","props":{"id":"default-provider"},"children":[{"type":"text","value":"Default Provider"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default provider for Nuxt Image is "},{"type":"element","tag":"a","props":{"href":"/providers/ipx"},"children":[{"type":"text","value":"ipx"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/getting-started/static"},"children":[{"type":"text","value":"static"}]},{"type":"text","value":" (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"target: static"}]},{"type":"text","value":"). Either option can be used without any configuration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/features/deployment-targets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Learn more about Nuxt deployment targets"}]}]},{"type":"element","tag":"h3","props":{"id":"local-images"},"children":[{"type":"text","value":"Local Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should be stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" directory of your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, when using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"<nuxt-img src=\"/nuxt-icon.png\" />"}]},{"type":"text","value":", it should be placed in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/"}]},{"type":"text","value":" folder under the path "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"static/nuxt-icon.png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image stored in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"assets/"}]},{"type":"text","value":" directory are "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" proccessed with Nuxt Image because those images are managed by webpack."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information, you can learn more about the "},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/2.x/directory-structure/static","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"static directory here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"remote-images"},"children":[{"type":"text","value":"Remote Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using default provider, you can also optimize external URLs. For this, you need to add them to "},{"type":"element","tag":"a","props":{"href":"/api/options#domains"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"domains"}]}]},{"type":"text","value":" option."}]},{"type":"element","tag":"h3","props":{"id":"environment-detection"},"children":[{"type":"text","value":"Environment Detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can set default provider using "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NUXT_IMAGE_PROVIDER"}]},{"type":"text","value":" environment variable. Providers below, are automatically detected:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/providers/vercel"},"children":[{"type":"text","value":"Vercel"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"default-provider","depth":2,"text":"Default Provider","children":[{"id":"local-images","depth":3,"text":"Local Images"},{"id":"remote-images","depth":3,"text":"Remote Images"},{"id":"environment-detection","depth":3,"text":"Environment Detection"}]}]}},"_type":"markdown","_id":"content:1.getting-started:2.providers.md","_source":"content","_file":"1.getting-started/2.providers.md","_extension":"md"}