- Notifications
You must be signed in to change notification settings - Fork1
🔥 Generate a placeholder image for the content area where the image resource is not ready.
License
pengzhanbo/vite-plugin-image-placeholder
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Image Placeholder Plugin
During project development, placeholder images are generated for content areas where no image resources are prepared.
English |简体中文
- 🗺 Generate images locally
- 🎨 Customize image width, background color, text, text color
- 🛠 Customize the image type
png,jpe?g,webp,avif,heif,gif,svg - 🎉 Flexible path-matching rules
- 🔥 HMR
- 🧱 Support import image module
- 📥 Support for build inline into code（html/css/js)
- 📤 Supports image output to build directory
- 🖥 Develop service injection middleware that supports
GETrequests to get images
npm i -D vite-plugin-image-placeholder
Plugin relies onsharp library to generate image resources.sharp relies onlibvips during installation and may fail to install in China. The solution is to write the following configuration in.npmrc file at the root of the project:
sharp_binary_host=https://npmmirror.com/mirrors/sharpsharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp-libvipsThen reinstall the plugin.
import{defineConfig}from'vite'importimagePlaceholderfrom'vite-plugin-image-placeholder'exportdefaultdefineConfig(()=>({plugins:[imagePlaceholder({prefix:'image/placeholder'})],}))
Path matching is supported bypath-to-regexp .
In a path to generate placeholder images, the URL consists ofpathname +query.pathname is composed ofprefix +named parameters,
prefixConfigured when the plugin is provided. default:image/placeholder。named parametersSet the properties of the placeholder image.
Supports the definition of image background color, text content, text color, width, height, and image type.
background color：
/background/:background, or/bg/:backgroundexp:
/background/ccc,/bg/fff,/bg/255,255,255text content：
/text/:text, or/t/:textexp:
/text/mark,/t/marktext color：
/textColor/:textColor, or/color/:textColor, or/c/:textColorexp:
/textColor/999,/color/333,/c/0,0,0width、height、type：
/:width?/:height?/{.:type}?exp:
/300,/300/200,/300/200.png,.png,/300.png
Background color, text content, and text color can be arranged or default,which means support for:
/text/:text/bg/:background/textColor/:textColor/text/:text/textColor/:textColor/bg/:background/text/:text/textColor/:textColor
Width, height and image format are fixed at the end ofpathname :
/text/:text/bg/:background/textColor/:textColor/:width?/:height?/{.:type}?/text/:text/textColor/:textColor/:width?/:height?/{.:type}?/bg/:background/text/:text/:width?/:height?/{.:type}?/textColor/:textColor/:width?/:height?/{.:type}?/:width?/:height?/{.:type}?Background color and text color values support bothHex andRGB formats.
Since the# inHex conflicts with thehash part of the path, the value ofHex needs to be omitted, that is,#ccc needs to be written asccc, and the path is/bg/ccc.
RGB format support shorthand, can bergb(0,0,0) can also be0,0,0, if the image format supports transparency, can also writergba(0,0,0,0.5), or0,0,0,0.5.
Image type support：png,jpe?g,webp,avif,heif,gif,svg
The plugin strictly checks whether the format of each value of the named parameters meets the requirements. For example, the color value must conform to the format of hex and rgb, and width and height must be integers.
If the check fails, the image is not generated, but treated as normal text.
The query part is not commonly used some image Settings support, currently mainly support image noise.
interfaceQuery{noise:1|0// image noisenoiseMean:number// image noise meannoiseSigma:number// image noise sigma}
/image/placeholder/image/placeholder/300/image/placeholder/300/200/image/placeholder/300/300.png/image/placeholder/t/customText/image/placeholder/text/customText/image/placeholder/t/customText/c/0,0,0/image/placeholder/text/customText/textColor/0,0,0/image/placeholder/text/customText/bg/255,255,255/image/placeholder/bg/00ffcc/image/placeholder/bg/00ffcc/text/customText/textColor/0,0,0/image/placeholder/bg/fff/text/customText/image/placeholder/text/customText.png/image/placeholder/bg/fff.png/image/placeholder/bg/fff/400/400.png/image/placeholder/bg/00ffcc/text/customText/textColor/0,0,0/300/200.png/image/placeholder?noise=1&noiseMean=10
Inhtml
<imgsrc="/image/placeholder"alt=""><imgsrc="/image/placeholder/200"alt=""><imgsrc="/image/placeholder/300/200"alt="">
Incss
.placeholder {background:url('/image/placeholder');}
Injs , import modules
importplaceholderfrom'virtual:image/placeholder'constimg=newImage()img.src=placeholder
Injs, Inline 'base64' as a string
constimg=newImage()img.src='/image/placeholder'
exportinterfaceImagePlaceholderOptions{/** * Picture path prefix * * When using modules import, you need to pass 'virtual:${prefix}' as the module path prefix * * When using GET requests or string inlining, you must use an absolute path, prefixed with '/${prefix}' as the path * *@default 'image/placeholder' */prefix?:string/** * image default background value of `Hex` or `RGB` * * Passing in an array of colors will randomly select any color as the default background color * *@default '#efefef' * */background?:string|string[]/** * text default color value of `Hex` or `RGB` * *@default '#666' */textColor?:string/** * text default content * *@default `${width}x${height}` */text?:string/** * image default type * *@type 'jpg' | 'jpeg' | 'png' | 'webp' | 'avif' | 'heif' | 'gif' | 'svg' * *@default 'png' */type?:ImageType/** * default width * *@default 300 */width?:number/** * default height * *@default `${width}x${ratio}` */height?:number/** * Image aspect ratio. When the height is not explicitly specified, * the height will be calculated according to the ratio * *@default 9/16 */ratio?:number/** * Image compression quality ratio. The value ranges from 0 to 100. * 100 indicates that the image is not compressed * *@default 80 */quality?:number/** * png image compression level. * The value ranges from 0 to 9. * 0 is the fastest but has high quality, and 9 is the slowest but has low quality * *@default 6 */compressionLevel?:number/** * Whether resources are inlined into code at production build time * *@default false */inline?:boolean/** * When producing a build, output the image resource to the build directory * * If the value is `true`, the default configuration is based on vite build and output to `dist/assets`. * *@default true */output?:|true|string|{dir?:string/** * Override filename. Sometimes image resources need to be published to CDN. * You can change the filename here */filename?:OutputFilename}}exporttypeOutputFilename=(filename:string,file:OutputFile)=>stringexportinterfaceOutputFile{basename:stringassetsDir:stringext:string}
About
🔥 Generate a placeholder image for the content area where the image resource is not ready.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.