Custom Provider for FS unStorage with nitro

[melasculla]

Hello there, idk how to implement this. i have fs driver in unstorage

nitro: {
  storage: {
    media: {
      driver: 'fs',
      base: './media'
    }
  }
}

i created nuxtImage driver similiar to ipx with my baseUrl http://localhost:3000/api/media

then i have my endpoint

// /server/api/media/[image].get.ts

export default defineEventHandler(async event => {
   const filename = getRouterParam(event, 'image')
   return await useStorage('media:images').getItemRaw(filename)
})

how can i actually compress images with ipx and cache them?

my nuxt/image Provider

import { joinURL, encodePath, encodeParam } from 'ufo'
import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

const operationsGenerator = createOperationsGenerator({
   keyMap: {
      format: 'f',
      fit: 'fit',
      width: 'w',
      height: 'h',
      resize: 's',
      quality: 'q',
      background: 'b',
   },
   joinWith: '&',
   formatter: (key, val) => encodeParam(key) + '_' + encodeParam(val),
})

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}, ctx) => {
   if (modifiers.width && modifiers.height) {
      modifiers.resize = `${modifiers.width}x${modifiers.height}`
      delete modifiers.width
      delete modifiers.height
   }

   const params = operationsGenerator(modifiers) || '_'

   if (!baseURL)
      baseURL = joinURL(ctx.options.nuxt.baseURL, '/_ipx')

   return { url: joinURL(baseURL, params, encodePath(src)) }
}

[melasculla]

i've upgrade to smth like this

// /server/api/media/images/[...].get.ts
import { createIPX, createIPXH3Handler, unstorageToIPXStorage } from 'ipx'

export default defineEventHandler(async event => {
   const storage = unstorageToIPXStorage(useStorage('media:images'))
   const ipx = createIPX({ storage })
   const ipxHandler = createIPXH3Handler(ipx)
   return await ipxHandler(event)
})

but i have error [404] [IPX_RESOURCE_NOT_FOUND] Resource not found: /media/images/test.jpg"
or File not found

and this works fine idk what im doing wrong

export default defineEventHandler(async event => {
   const storage = unstorageToIPXStorage(useStorage('media:images'))
   return await storage.getData('test.jpg')
})

[melasculla]

i ended up with that

image: {
  domains: [
    process.env.NUXT_PUBLIC_BASE_URL
  ],
  alias: {
    fs: `${process.env.NUXT_PUBLIC_BASE_URL}/api/media/images`
  }
}

<NuxtImg src="/fs/test.jpg" />

works fine for me but i got errors from vue router for some reason WARN [Vue Router warn]: No match found for location with path "/api/media/images/test.jpg"
here is the fix

nitro: {
  routeRules: {
    '/api/**': { ssr: false }
  }
}