From 99259d77fefa0b1d480e164c7017489c36615a5a Mon Sep 17 00:00:00 2001 From: giraud florent Date: Sat, 26 Jun 2021 16:24:30 -0400 Subject: [PATCH 1/5] update documentation on default behavior --- docs/pages/en/4.providers/ipx.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/pages/en/4.providers/ipx.md b/docs/pages/en/4.providers/ipx.md index 67914f509..9d65dc61d 100644 --- a/docs/pages/en/4.providers/ipx.md +++ b/docs/pages/en/4.providers/ipx.md @@ -20,6 +20,16 @@ Use IPX for self-hosting as an alternative to use service providers for producti Just add `@nuxt/image` to `modules` (instead of `buildModules`) in `nuxt.config`. This will ensure that the `/_ipx` endpoint continues to work in production. +Images should be stored in the `static` directory as default. + +If we take our previous example: + +```html + +``` + +The `nuxt-icon.png` should be placed in `static` folder under the path `/static/nuxt-icon.png`. + ### Alternative: serverMiddleware If you have an advanced use case, you may instead create a custom server middleware that handles the `/_ipx` endpoint: @@ -64,4 +74,4 @@ export default { '/_ipx': '~/server/middleware/ipx.js' } } -``` +``` \ No newline at end of file From 0cd3258f9fd1ebbce6bd9d7a17a536e3ec4e77ed Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 29 Jun 2021 18:48:09 +0200 Subject: [PATCH 2/5] refactor notes about ipx static dir --- docs/pages/en/1.getting-started/2.providers.md | 14 ++++++++++++++ docs/pages/en/2.components/1.nuxt-img.md | 12 +++--------- docs/pages/en/4.providers/ipx.md | 15 ++------------- 3 files changed, 19 insertions(+), 22 deletions(-) diff --git a/docs/pages/en/1.getting-started/2.providers.md b/docs/pages/en/1.getting-started/2.providers.md index ae2e7eaf7..83e476a51 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 ` ``` -### 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` directrory 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 9d65dc61d..61a9edb8a 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,21 +15,10 @@ 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. -Images should be stored in the `static` directory as default. - -If we take our previous example: - -```html - -``` - -The `nuxt-icon.png` should be placed in `static` folder under the path `/static/nuxt-icon.png`. - ### Alternative: serverMiddleware If you have an advanced use case, you may instead create a custom server middleware that handles the `/_ipx` endpoint: @@ -74,4 +63,4 @@ export default { '/_ipx': '~/server/middleware/ipx.js' } } -``` \ No newline at end of file +``` From bde960c3789602734b685f9a2a62e5abdf1f67cc Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 29 Jun 2021 18:50:06 +0200 Subject: [PATCH 3/5] tiny fixes --- docs/pages/en/1.getting-started/2.providers.md | 2 +- docs/pages/en/2.components/1.nuxt-img.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/en/1.getting-started/2.providers.md b/docs/pages/en/1.getting-started/2.providers.md index 83e476a51..de1f065e6 100644 --- a/docs/pages/en/1.getting-started/2.providers.md +++ b/docs/pages/en/1.getting-started/2.providers.md @@ -21,7 +21,7 @@ The default provider for Nuxt Image is [ipx](/providers/ipx) or [static](/gettin 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. diff --git a/docs/pages/en/2.components/1.nuxt-img.md b/docs/pages/en/2.components/1.nuxt-img.md index cb139ddad..6ad2528d8 100644 --- a/docs/pages/en/2.components/1.nuxt-img.md +++ b/docs/pages/en/2.components/1.nuxt-img.md @@ -26,7 +26,7 @@ Will result in: ``` :::alert{type="info"} -With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `/static` directrory for making above example working. +With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `static/` directrory for making above example working. ::: ## Props From 12b6746f99d6231ebeee48082e0d5842de6721b3 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 29 Jun 2021 19:11:34 +0200 Subject: [PATCH 4/5] fix typo --- docs/pages/en/2.components/1.nuxt-img.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/en/2.components/1.nuxt-img.md b/docs/pages/en/2.components/1.nuxt-img.md index 6ad2528d8..ef3846fe1 100644 --- a/docs/pages/en/2.components/1.nuxt-img.md +++ b/docs/pages/en/2.components/1.nuxt-img.md @@ -26,7 +26,7 @@ Will result in: ``` :::alert{type="info"} -With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `static/` directrory for making above example working. +With [default provider](/getting-started/providers#default-provider), you should put `/nuxt-icon.png` inside `static/` directory for making above example working. ::: ## Props From 936051d0903caaa2bf5aab57d51e695dd44998c2 Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Tue, 29 Jun 2021 19:15:03 +0200 Subject: [PATCH 5/5] clarify servermiddleware use with dir option --- docs/pages/en/4.providers/ipx.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/pages/en/4.providers/ipx.md b/docs/pages/en/4.providers/ipx.md index 61a9edb8a..11e54d1dd 100644 --- a/docs/pages/en/4.providers/ipx.md +++ b/docs/pages/en/4.providers/ipx.md @@ -19,9 +19,9 @@ Use IPX for self-hosting as an alternative to use service providers for producti 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: @@ -48,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) ```