Vite-plugin-replace-image-url NPM

vite-plugin-replace-image-url

npm license

A vite plugin which replace images url.

Installation

  # npm
  npm i vite-plugin-replace-image-url -D

  # yarn
  yarn add vite-plugin-replace-image-url -D

  # pnpm
  pnpm add vite-plugin-replace-image-url -D

Usage

Here's an example vite config illustrating how to use this plugin

vite.config.js

import replaceImageUrl from 'vite-plugin-replace-image-url';
export default {
  plugins: [replaceImageUrl()],
}

You can pass a hash of configuration options to vite-plugin-replace-image-url. Allowed values are as follows:

Name	Type	Default	Description
`publicPath`	`{string}`	`''`	A path which added in front of filenames.
`sourceDir`	`{string}`	`'src/static'`	The path where the picture is located.
`include`	`{string \\| Array<string>}`	`['*/.svg', '*/.png', '*/.jp(e)?g', '*/.gif', '*/.webp']`	A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on.
`exclude`	`{string \\| Array<string>}`	`[]`	A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore.
`verbose`	`{boolean}`	`false`	Write logs to console.

Here's an example vite config illustrating how to use these options

vite.config.js

import replaceImageUrl from 'vite-plugin-replace-image-url';
export default {
  plugins: [replaceImageUrl(
    {
      publicPath: VITE_CDN_URL,
      sourceDir: path.resolve(__dirname, './src/static'),
      include: ['**/*.svg', '**/*.png', '**/*.jp(e)?g', '**/*.gif', '**/*.webp'],
      exclude: ['**/logo.png'],
      verbose: true,
    }
  )],
}