feat(generate): generate local file on static generation

src/module.ts

@@ -1,6 +1,9 @@
 import path from 'path'
 import hash from 'hasha'
+import fs from 'fs-extra'
 import { ModuleOptions, ProviderFactory } from './types'
+import localGenerator from './providers/local/generate'
+import { logger } from './utils'
 
 const { name, version } = require('../package.json')
 
@@ -107,6 +110,24 @@ async function ImageModule (moduleOptions) {
     // Transpile and alias image src
     nuxt.options.alias['~image'] = __dirname
     nuxt.options.build.transpile.push(__dirname)
+
+    nuxt.hook('generate:page', async (page) => {
+        const { dir } = nuxt.options.generate
+
+        const generator = localGenerator(options.providers.local)
+
+        const images = page.html.match(/\/_image\/local[^\"\s]+/g)
+
+        await Promise.all(
+            images.map(async (image) => {
+                const data = await generator(image.replace('/_image/local', ''))
+                const imagePath = dir + image
+                await fs.ensureDir(path.dirname(imagePath))
+                await fs.writeFile(imagePath, data, "binary")
+                logger.success("Generated image " + image)
+            })
+        )
+    })
 }
 
 function tryRequire(id) {

src/providers/local/generate.ts

@@ -0,0 +1,33 @@
+import { IPX } from 'ipx'
+
+async function IPXReqHandler (ipx: any, url: string) {
+  const urlArgs = url.substr(1).split('/')
+  const format = decodeURIComponent(urlArgs.shift() || '')
+  const operations = decodeURIComponent(urlArgs.shift() || '')
+  const src = urlArgs.map(c => decodeURIComponent(c)).join('/')
+
+
+
+  // Get basic info about request
+  const info = await ipx.getInfo({ format, operations, src })
+
+
+
+  // Process request to get image
+  const data = await ipx.getData(info)
+
+  // Send image
+  return data
+}
+
+export default function IPXMiddleware (options: any) {
+    const ipx = new IPX({
+    input: {
+        adapter: 'fs',
+        dir: options.dir
+    },
+    });
+  return async function IPXMiddleware (url: string) {
+    return IPXReqHandler(ipx, url)
+  }
+}

src/providers/local/runtime.ts

@@ -8,6 +8,6 @@ export default <RuntimeProvider> {
       operations.push(`w_${modifiers.width}`)
     }
     const operationsString = operations.length ? operations.join(',') : '_'
-    return options.baseURL + '/_/' + operationsString + src
+    return options.baseURL + '/_/' + operationsString + encodeURI(src)
   }
 }

src/runtime/components/nuxt-image.ts

@@ -154,7 +154,7 @@ export default {
     methods: {
         renderNonOptimizedImage(h) {
             return h('img', {
-                class: '__nuxt-image-original visible',
+                class: '__nuxt-image-abs visible',
                 attrs: {
                     src: this.generatedSrc,
                     srcset: this.generatedSrcset,

src/runtime/image.ts

@@ -5,6 +5,7 @@ interface ImagePreset {
   modifiers: any
   provider?: string
 }
+
 interface CreateImageOptions {
   providers: {
     [name: string]: {

src/utils.ts

@@ -0,0 +1,3 @@
+import consola from 'consola'
+
+export const logger = consola.withScope('@nuxt/image')