Add ThumbHash to your vite project.
npm install vite-plugin-thumbhash --save-devpnpm add vite-plugin-thumbhash -Dimport { defineConfig } from 'vite'
import { thumbHash } from 'vite-plugin-thumbhash'
export default defineConfig({
plugins: [thumbHash()]
})import Image from 'example.jpg?thumb'
//...
<img src={Image.thumbSrc}
width={Image.thumbWidth}
height={Image.thumbHeight}
/>
// If you want to import original image
<img src={Image.originalSrc}
width={Image.originalWidth}
height={Image.originalHeight}
/>Add the following code to vite-env.d.ts :
/// <reference types="vite-plugin-thumbhash/client" />type Options =
{
/**
* A picomatch pattern, or array of patterns,
* which specifies the files in the build the plugin should operate on.
*/
include?: Array<string | RegExp> | string | RegExp
/**
* A picomatch pattern, or array of patterns,
* which specifies the files in the build the plugin should ignore.
*/
exclude?: Array<string | RegExp> | string | RegExp
/**
* type OutputExtension = 'png' | 'jpg' | 'webp' | 'avif'
* @default: 'png'
*/
outputExtension?: OutputExtension
}see playground
MIT © nemurubaka
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent