Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | import { existsSync } from 'node:fs';
import { join } from 'node:path';
/**
* Vite plugin that provides fallback for image variants during development.
* In production, resized (-640) and WebP variants exist in dist/.
* In dev mode, only originals exist in static/, so this middleware
* transparently serves the original when a variant is requested.
*/
export default function imageVariantFallback() {
return {
name: 'vite-image-variant-fallback',
configureServer(server) {
server.middlewares.use((req, res, next) => {
if (!req.url || !req.url.startsWith('/images/blog/')) {
return next();
}
const staticDir = join(process.cwd(), 'static');
const filePath = join(staticDir, req.url);
// If the requested file exists, serve it normally
if (existsSync(filePath)) {
return next();
}
// Try stripping -640 suffix
let fallbackUrl = req.url.replace(/-640/, '');
// Try converting .webp to original format
if (fallbackUrl.endsWith('.webp')) {
for (const ext of ['.png', '.jpg', '.jpeg']) {
const tryUrl = fallbackUrl.replace(/\.webp$/, ext);
if (existsSync(join(staticDir, tryUrl))) {
req.url = tryUrl;
return next();
}
}
}
// Try the fallback without -640
if (existsSync(join(staticDir, fallbackUrl))) {
req.url = fallbackUrl;
return next();
}
next();
});
},
};
}
|