feat: support assets using remote adapter

docs/content/en/providers/local.md

@@ -17,10 +17,6 @@ Internally nuxt image uses [ipx](https://github.com/nuxt-contrib/ipx) to modify
 export default {
   image: {
     local: {
-      /**
-       * Input directory for images
-       **/
-      dir: '~/static',
       /**
        * Cache directory for optimized images
        **/

package.json

@@ -25,8 +25,10 @@
     "defu": "^3.2.2",
     "hasha": "^5.2.2",
     "image-meta": "^0.0.1",
-    "ipx": "^0.4.1",
+    "ipx": "^0.4.2",
+    "is-https": "^2.0.2",
     "node-fetch": "^2.6.1",
+    "requrl": "^2.0.1",
     "upath": "^2.0.1"
   },
   "devDependencies": {

playground/pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="container">
       <h2>SVG image inside project</h2>
-      <NuxtImg src="images/nuxt-white.svg" width="400" height="400" />
+      <nuxt-img src="~/assets/nuxt-white.svg" width="400" height="400" />
 
       <h2>SVG image from remote url</h2>
       <NuxtImg src="https://nuxtjs.org/logos/nuxt.svg" width="400" height="400" />

src/index.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import fs from 'fs-extra'
 import { ModuleOptions } from 'types'
+import defu from 'defu'
 import { downloadImage, getFileExtension, getProviders, hash } from './utils'
 import { cleanDoubleSlashes } from './runtime/utils'
 export type { Provider, RuntimeProvider } from 'types'
@@ -57,6 +58,15 @@ async function imageModule (moduleOptions: ModuleOptions) {
   nuxt.options.alias['~image'] = runtimeDir
   nuxt.options.build.transpile.push(runtimeDir)
 
+  nuxt.options.build.loaders = defu({
+    vue: {
+      transformAssetUrls: {
+        'nuxt-img': 'src',
+        'nuxt-picture': 'src'
+      }
+    }
+  }, nuxt.options.build.loaders || {})
+
   nuxt.hook('generate:before', () => {
     handleStaticGeneration(nuxt, options)
   })

src/providers/local/index.ts

@@ -1,4 +1,7 @@
+import { ServerResponse, IncomingMessage } from 'http'
 import { ProviderFactory } from 'types'
+import isHttps from 'is-https'
+import requrl from 'requrl'
 
 export default <ProviderFactory> function (providerOptions) {
   return {
@@ -15,11 +18,6 @@ function createMiddleware (options) {
 
   const ipx = new IPX({
     inputs: [
-      {
-        name: 'local',
-        adapter: 'fs',
-        dir: options.dir
-      },
       {
         name: 'remote',
         adapter: 'remote',
@@ -32,5 +30,19 @@ function createMiddleware (options) {
     },
     sharp: options.sharp
   })
-  return IPXMiddleware(ipx)
+  const ipxMiddleware = IPXMiddleware(ipx)
+
+  return (req: IncomingMessage, res: ServerResponse) => {
+    const host = new URL(requrl(req)).host
+    const url = req.url || '/'
+    const urlArgs = url.substr(1).split('/')
+    const adapter = decodeURIComponent(urlArgs.shift() || '')
+    const format = decodeURIComponent(urlArgs.shift() || '')
+    const operations = decodeURIComponent(urlArgs.shift() || '')
+    const src = urlArgs.map(c => decodeURIComponent(c)).join('/')
+    if (adapter === 'remote' && !src.startsWith('http')) {
+      req.url = `/${adapter}/${format}/${operations}/http${isHttps(req) ? 's' : ''}://${host}/${src}`
+    }
+    return ipxMiddleware(req, res)
+  }
 }

src/providers/local/runtime.ts

@@ -1,14 +1,8 @@
 import { RuntimeProvider, ImageModifiers } from 'types'
-
-function predictAdapter (src: string) {
-  if (src.match(/^https?:\/\//)) {
-    return 'remote'
-  }
-  return 'local'
-}
+import { isRemoteUrl } from '~image/utils'
 
 export default <RuntimeProvider> {
-  getImage (src: string, modifiers: ImageModifiers, _options: any) {
+  getImage (src: string, modifiers: ImageModifiers, options: any) {
     const operations = []
 
     const fit = modifiers.fit ? `_${modifiers.fit}` : ''
@@ -23,13 +17,13 @@ export default <RuntimeProvider> {
       operations.push(`q_${modifiers.quality}`)
     }
 
-    const adapter = predictAdapter(src)
+    src = isRemoteUrl(src) ? src : (options.baseURL || '') + src
 
     const operationsString = operations.join(',') || '_'
 
     return {
-      url: `/_image/local/${adapter}/${modifiers.format || '_'}/${operationsString}/${src}`,
-      isStatic: true
+      url: `/_image/local/remote/${modifiers.format || '_'}/${operationsString}/${src}`,
+      static: true
     }
   }
 }

src/runtime/image.ts

@@ -78,7 +78,7 @@ export function createImage (context, { providers, defaultProvider, presets, int
 
     const image = provider.provider.getImage(
       src,
-      defu(modifiers, preset.modifiers),
+      defu(modifiers, (preset && preset.modifiers) || {}),
       { ...provider.defaults, ...options }
     )
 

src/utils.ts

@@ -56,38 +56,12 @@ export async function getProviders (nuxt, options: ModuleOptions): Promise<Modul
 }
 
 export function enrichLocalProvider (nuxt, providerOptions) {
-  const { options } = nuxt
-  // Default port
-  const defaultPort =
-   process.env.PORT ||
-   process.env.npm_package_config_nuxt_port ||
-   (options.server && options.server.port) ||
-   3000
-
-  // Default host
-  let defaultHost =
-   process.env.HOST ||
-   process.env.npm_package_config_nuxt_host ||
-   (options.server && options.server.host) ||
-   'localhost'
-
-  /* istanbul ignore if */
-  if (defaultHost === '0.0.0.0') {
-    defaultHost = 'localhost'
-  }
-
-  // Default prefix
-  const prefix = '/'
-
   providerOptions = defu(providerOptions, {
-    baseURL: `http://${defaultHost}:${defaultPort}${prefix}`,
-    dir: path.join('~', options.dir.static),
     clearCache: false,
     cacheDir: '~~/node_modules/.cache/nuxt-image',
     sharp: {}
   })
 
-  providerOptions.dir = nuxt.resolver.resolveAlias(providerOptions.dir)
   providerOptions.cacheDir = nuxt.resolver.resolveAlias(providerOptions.cacheDir)
 
   return providerOptions

yarn.lock

@@ -6517,10 +6517,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
-ipx@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.4.1.tgz#747c221e1ec979247401f870de0f7afdeaf7837f"
-  integrity sha512-TxKdCKMo2eYUDK2Nbs0mAVQQuBmEuuB8oeToyajxMrzPj3aVoonAyo+m6b0XZufE5fBP1rCm+KSkOr0I5Qh70A==
+ipx@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/ipx/-/ipx-0.4.2.tgz#90c6ec2aaffb0875740c2ce3428ded43a385628d"
+  integrity sha512-IxDPBtN3MLCKiVvbNimivaLM88FCZHrWEVKAlgm9RpJDTTchsbvpJouDk2s1mfO/B/g9GNvJHfNTYeySC3IHzg==
   dependencies:
     connect "^3.7.0"
     consola "^2.15.0"
@@ -6733,6 +6733,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-https@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-https/-/is-https-2.0.2.tgz#7009d303c72580f15897d5c063d6b6bc1f838fef"
+  integrity sha512-UfUCKVQH/6PQRCh5Qk9vNu4feLZiFmV/gr8DjbtJD0IrCRIDTA6E+d/AVFGPulI5tqK5W45fYbn1Nir1O99rFw==
+
 is-invalid-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-invalid-path/-/is-invalid-path-0.1.0.tgz#307a855b3cf1a938b44ea70d2c61106053714f34"
@@ -10414,6 +10419,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+requrl@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/requrl/-/requrl-2.0.1.tgz#7028de9f00bf87b35585c675e94d75987f6973e9"
+  integrity sha512-l6iZwt1x7CN4TCyZqIbYS1o3tN5FRGnsvSSBOrtsmgS87f48J81AvRv6HGri79RHW4Ssim07fr+Fw08cYMWmsw==
+
 reserved-words@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"