fix(static): url encoded name included in generated ext (#340)

Co-authored-by: Pooya Parsa <[email protected]>

src/generate.ts

@@ -3,12 +3,12 @@ import { createWriteStream } from 'fs'
 import { promisify } from 'util'
 import stream from 'stream'
 import { mkdirp } from 'fs-extra'
-import { dirname, join, relative, extname, basename, trimExt } from 'upath'
+import { dirname, join, relative, basename, trimExt } from 'upath'
 import fetch from 'node-fetch'
 import { joinURL, hasProtocol, parseURL, withoutTrailingSlash } from 'ufo'
 import pLimit from 'p-limit'
 import { ModuleOptions, MapToStatic, ResolvedImage } from './types'
-import { hash, logger } from './utils'
+import { hash, logger, guessExt } from './utils'
 
 const pipeline = promisify(stream.pipeline)
 
@@ -17,12 +17,12 @@ export function setupStaticGeneration (nuxt: any, options: ModuleOptions) {
 
   nuxt.hook('vue-renderer:ssr:prepareContext', (renderContext: any) => {
     renderContext.image = renderContext.image || {}
-    renderContext.image.mapToStatic = <MapToStatic> function ({ url, format }: ResolvedImage) {
+    renderContext.image.mapToStatic = <MapToStatic> function ({ url, format }: ResolvedImage, input: string) {
       if (!staticImages[url]) {
-        const { pathname } = parseURL(url)
+        const { pathname } = parseURL(input)
         const params: any = {
           name: trimExt(basename(pathname)),
-          ext: (format && `.${format}`) || extname(pathname) || '.png',
+          ext: (format && `.${format}`) || guessExt(input),
           hash: hash(url),
           // TODO: pass from runtimeConfig to mapStatic as param
           publicPath: withoutTrailingSlash(nuxt.options.build.publicPath)

src/runtime/image.ts

@@ -47,7 +47,7 @@ export function createImage (globalOptions: CreateImageOptions, nuxtContext: any
           }
           const mapToStatic: MapToStatic = ssrContext.image?.mapToStatic
           if (typeof mapToStatic === 'function') {
-            const mappedURL = mapToStatic(image)
+            const mappedURL = mapToStatic(image, input)
             if (mappedURL) {
               staticImages[image.url] = mappedURL
               image.url = mappedURL

src/types/image.ts

@@ -107,4 +107,4 @@ export interface OperationGeneratorConfig {
   }
 }
 
-export type MapToStatic = (image: ResolvedImage) => string
+export type MapToStatic = (image: ResolvedImage, input: string) => string

src/utils.ts

@@ -17,3 +17,11 @@ export function pick<O extends Record<any, any>, K extends keyof O> (obj: O, key
   }
   return newobj
 }
+
+export function guessExt (input: string = '') {
+  const ext = input.split('.').pop()?.split('?')[0]
+  if (ext && /^[\w0-9]+$/.test(ext)) {
+    return '.' + ext
+  }
+  return ''
+}