oyjt / vite-plugin-replace-image-url

A vite plugin which replace images url.

vite-plugin-replace-image-url

A vite plugin which replace images url.

English | 中文

Table of Contents

1. Installation
2. Usage
3. Issues
4. License

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()],
}

Options

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,
    }
  )],
}

Issues

If you encounter some problems during use, please click here Issue Report

License

MIT License

Copyright (c) 2023-present cnpath