rollup / rollup-plugin-image

This module has moved and is now available at @rollup/plugin-image / https://github.com/rollup/plugins/blob/master/packages/image

Moved

This module has moved and is now available at @rollup/plugin-image. Please update your dependencies. This repository is no longer maintained.

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

rollup-plugin-image's Issues

doesn't work with Typescript

Works fine with plain JavaScript, but doesn't work with Typescript. Here is the repository for reproducing: https://github.com/AntonPilyak/rollup-image-bug

Need exclude/include patterns for file types

There are conflicts while using

• rollup-plugin-image
• rollup-plugin-vue-inline-svg

together because both try to import an svg:

import svg from './svg/svg.svg

Why is .js appended to svg imports?

Hi, with this config

// rollup.config.json
import path from 'path'

import alias from 'rollup-plugin-alias'
import babel from 'rollup-plugin-babel'
import browsersync from 'rollup-plugin-browsersync'
import commonjs from 'rollup-plugin-commonjs'
import css from 'rollup-plugin-css-only'
import htmlTemplate from 'rollup-plugin-generate-html-template'
import nodeResolve from 'rollup-plugin-node-resolve'
import image from 'rollup-plugin-image'

const isDev = process.env.NODE_ENV !== 'production'

export default {
  external: ['jquery'],
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    globals: {
      jquery: '$',
    },
  },
  plugins: [
    alias({
      '@': path.join(__dirname, 'src'),
    }),
    babel({
      exclude: 'node_modules/**',
    }),
    browsersync({ server: 'dist' }),
    commonjs({
      include: 'node_modules/**',
      ignoreGlobal: false,
      sourceMap: isDev,
      exclude: [
        'node_modules/process-es6/**',
      ],
      namedExports: {
        'node_modules/react/index.js': ['Children', 'Component', 'PropTypes', 'createElement'],
        'node_modules/react-dom/index.js': ['render'],
        'node_modules/uuid/index.js': ['v4'],
        'node_modules/react-is/index.js': ['isValidElementType'],
      },
    }),
    css(),
    htmlTemplate({
      template: 'src/template.html',
      target: 'index.html',
    }),
    image(),
    nodeResolve({
      browser: true,
      jsnext: true,
      main: true,
    }),
  ],
  watch: {
    chokidar: true,
    include: 'src/**',
  },
}

When I write

import DeleteIcon from '@/icons/baseline-delete_forever-24px.svg'

I get Error: Could not load /<irrelevant>/<rollup-project-folder>/src/icons/baseline-delete_forever-24px.svg.js

What am I doing wrong?

doesn't work with react

Error: 'default' is not exported by './logo.png'

Error when importing (iife format)

Hi,

I got an error when i try to use this plugin :
logo.svg does not export default

I must doing something wrong but I do not find.
Here are the plugins I am using :

const plugins = [
    json(),
    image(),
    nodeResolve(),
    commonjs(),
    babel({
        presets: 'es2015-rollup',
        include: [
            '**/*.js'
        ],
        exclude: [
            'node_modules/**',
            'app/media/js/vendors/**'
        ]
    })
];

I follow the example to use it.

Thanks for any help.

'import' and 'export' may only appear at the top level

'import' and 'export' may only appear at the top level (26422:1141)
You may need an appropriate loader to handle this file type.

Base64 encoded SVGs don't work

The base64 string seems not to have all data. Tested with various SVGs.

Doesn't work with vue.

Use https://github.com/alwaysonlinetxm/rollup-plugin-img does work.

[!] Error: 'default' is not exported by assets/images/verified.png
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module-
pkgs/vue-components/elements/icon/VerifiedIcon.vue?rollup-plugin-vue=script.js (7:7)
5:
6: import QxImageView from 'qxjs/pkgs/vue-components/elements/image/QxImageView.vue';
7: import asset from '../../../../assets/images/verified.png';
          ^
8:
9: export default {
Error: 'default' is not exported by assets/images/verified.png

imagemin support

Could this plugin support https://github.com/imagemin/imagemin ?