diff --git a/docs/pages/en/1.getting-started/2.providers.md b/docs/pages/en/1.getting-started/2.providers.md index ae2e7eaf7..de1f065e6 100644 --- a/docs/pages/en/1.getting-started/2.providers.md +++ b/docs/pages/en/1.getting-started/2.providers.md @@ -17,6 +17,20 @@ The default provider for Nuxt Image is [ipx](/providers/ipx) or [static](/gettin [Learn more about Nuxt deployment targets](https://nuxtjs.org/docs/2.x/features/deployment-targets) +### Local Images + +Images should be stored in the `static/` directory of your project. + +For example, when using ``, it should be placed in `static/` folder under the path `static/nuxt-icon.png`. + +Image stored in the `assets/` directory are **not** proccessed with Nuxt Image because those images are managed by webpack. + +For more information, you can learn more about the [static directory here](https://nuxtjs.org/docs/2.x/directory-structure/static). + +### Remote Images + +Using default provider, you can also optimize external URLs. For this, you need to add them to [`domains`](/api/options#domains) option. + ### Environment Detection You can set default provider using `NUXT_IMAGE_PROVIDER` environment variable. Providers below, are automatically detected: diff --git a/docs/pages/en/2.components/1.nuxt-img.md b/docs/pages/en/2.components/1.nuxt-img.md index 68f9f9124..ef3846fe1 100644 --- a/docs/pages/en/2.components/1.nuxt-img.md +++ b/docs/pages/en/2.components/1.nuxt-img.md @@ -25,15 +25,9 @@ Will result in: ``` -### File Location - -Images should be stored in the `static` directory. - -For example, the `nuxt-icon.png` referred to in the previous example should be placed in `static` folder under the path `/static/nuxt-icon.png`. - -In other words, image stored in the `assets` directory are not compatible with Nuxt Image because those images are managed by webpack. - -For more information, you can learn more about the [static directory here](https://nuxtjs.org/docs/2.x/directory-structure/static). +:::alert{type="info"} +With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `static/` directory for making above example working. +::: ## Props diff --git a/docs/pages/en/4.providers/ipx.md b/docs/pages/en/4.providers/ipx.md index 67914f509..11e54d1dd 100644 --- a/docs/pages/en/4.providers/ipx.md +++ b/docs/pages/en/4.providers/ipx.md @@ -5,7 +5,7 @@ navigation: title: IPX --- -Nuxt Image comes with a preconfigured instance of [ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp). +Nuxt Image comes with a [preconfigured instance](/getting-started/providers#default-provider) of [ipx](https://github.com/unjs/ipx). An open source, self-hosted image optimizer based on [sharp](https://github.com/lovell/sharp). ## Using `ipx` in production @@ -15,14 +15,13 @@ Use IPX for self-hosting as an alternative to use service providers for producti You don't need to follow this section if using `target: 'static'`. ::: - ### Runtime Module Just add `@nuxt/image` to `modules` (instead of `buildModules`) in `nuxt.config`. This will ensure that the `/_ipx` endpoint continues to work in production. -### Alternative: serverMiddleware +### Advanced: Custom ServerMiddleware -If you have an advanced use case, you may instead create a custom server middleware that handles the `/_ipx` endpoint: +If you have an usecase of a custom IPX instance serving other that `static/` dir, you may instead create a server Middleware that handles the `/_ipx` endpoint: 1. Add `ipx` as a dependency: @@ -49,7 +48,12 @@ If you have an advanced use case, you may instead create a custom server middlew import { createIPX, createIPXMiddleware } from 'ipx' // https://github.com/unjs/ipx -const ipx = createIPX(/* options */) +const ipx = createIPX({ + dir: '', // absolute path to images dir + domains: [], // allowed external domains (should match domains option in nuxt.config) + alias: {}, // base alias + sharp: {}, // sharp options +}) export default createIPXMiddleware(ipx) ```