1. rollup-plugin-image
Import JPG, PNG, GIF and SVG images
rollup-plugin-image
Package: rollup-plugin-image
Created by: rollup
Last modified: Sun, 26 Jun 2022 13:59:32 GMT
Version: 1.0.2
License: MIT
Downloads: 7,202
Repository: https://github.com/rollup/rollup-plugin-image

Install

npm install rollup-plugin-image
yarn add rollup-plugin-image

rollup-plugin-image

Import JPG, PNG, GIF and SVG files.

Installation

 npm install --save-dev rollup-plugin-image

Usage

 // rollup.config.js
import image from 'rollup-plugin-image';

export default {
  entry: 'src/index.js',
  dest: 'dist/my-lib.js',
  plugins: [
    image()
  ]
};

You can now use images in your bundle like so:

 import logo from './rollup.png';
document.body.appendChild( logo );

Images are encoded using base64, which means they will be 33% larger than the size on disk. You should therefore only use this for small images where the convenience of having them available on startup (e.g. rendering immediately to a canvas without co-ordinating asynchronous loading of several images) outweighs the cost.

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin