feat: 支持通过模块导入占位图片(base64)

example/env.d.ts

@@ -0,0 +1,4 @@
+declare module 'virtual:*' {
+  const result: any
+  export default result
+}

example/main.ts

@@ -0,0 +1,6 @@
+import placeholder from 'virtual:image/placeholder'
+
+const img = new Image()
+img.src = placeholder
+
+document.body.appendChild(img)

src/cache.ts

@@ -1,6 +1,10 @@
 import LRU from 'lru-cache'
 import type { ImageCacheItem } from './types'
 
-export const cache = new LRU<string, ImageCacheItem>({
+export const bufferCache = new LRU<string, ImageCacheItem>({
+  max: 500,
+})
+
+export const contentCache = new LRU<string, string>({
   max: 500,
 })

src/pathToImage.ts

@@ -2,7 +2,7 @@ import { parse as urlParse } from 'node:url'
 import { match, pathToRegexp } from 'path-to-regexp'
 import type { Create, CreateText } from 'sharp'
 import sharp from 'sharp'
-import { cache } from './cache'
+import { bufferCache } from './cache'
 import { DEFAULT_PARAMS } from './constants'
 import type {
   ImageCacheItem,
@@ -22,8 +22,8 @@ export async function pathToImage(
   rules: string[],
   options: Required<ImagePlaceholderOptions>,
 ): Promise<ImageCacheItem | undefined> {
-  if (cache.has(url)) {
-    return cache.get(url)
+  if (bufferCache.has(url)) {
+    return bufferCache.get(url)
   }
   const { query: urlQuery, pathname } = urlParse(url, true)
 
@@ -77,7 +77,7 @@ export async function pathToImage(
     type: imgType,
     buffer: imgBuf,
   }
-  cache.set(url, result)
+  bufferCache.set(url, result)
   return result
 }
 

src/plugin.ts

@@ -1,9 +1,10 @@
 import type { Plugin } from 'vite'
+import { contentCache } from './cache'
 import { DEFAULT_PREFIX } from './constants'
 import { generatePathRules } from './pathRules'
 import { pathToImage } from './pathToImage'
 import type { ImagePlaceholderOptions } from './types'
-import { getMimeType, logger } from './utils'
+import { getMimeType } from './utils'
 
 const parseOptions = (
   options: ImagePlaceholderOptions,
@@ -41,7 +42,7 @@ function placeholderServerPlugin(
       middlewares.use(async function (req, res, next) {
         const url = req.url!
         if (!url.startsWith(opts.prefix)) return next()
-        logger(url)
+        // logger(url)
 
         try {
           const image = await pathToImage(url, pathRules, opts)
@@ -65,6 +66,8 @@ function placeholderInjectPlugin(
   options: ImagePlaceholderOptions = {},
 ): Plugin {
   const opts = parseOptions(options)
+  const pathRules = generatePathRules(opts.prefix)
+  const RE_VIRTUAL = /^\0virtual:\s*/
   const moduleId = `virtual:${opts.prefix}`
   const resolveVirtualModuleId = `\0${moduleId}`
   return {
@@ -76,7 +79,17 @@ function placeholderInjectPlugin(
     },
     async load(id) {
       if (id.startsWith(resolveVirtualModuleId)) {
-        // const url = id.replace(resolveVirtualModuleId, '')
+        const url = id.replace(RE_VIRTUAL, '')
+        if (contentCache.has(url)) {
+          return `export default '${contentCache.get(url)!}'`
+        }
+        const image = await pathToImage(url, pathRules, opts)
+        if (image) {
+          const base64 = image.buffer.toString('base64')
+          const content = `data:${getMimeType(image.type)};base64,${base64}`
+          contentCache.set(url, content)
+          return `export default '${content}'`
+        }
       }
     },
   }