bspaulding / rollup-plugin-image-files

Like rollup-plugin-image, but writes image files to dest instead of inlining base64.

rollup-plugin-image-files

Like rollup-plugin-image, but writes image files to dest instead of inlining base64. This was written for a library that would be consumed by react-native applications.

Usage

Install the plugin via npm:

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

Add the plugin to your rollup config:

import images from 'rollup-plugin-image-files';

export default {
  entry: 'src/index.js',
  des: 'dist/bundle.js',
  plugins: [images()]
}

Require some images in your source:

import React from 'react';
import { Image } from 'react-native';
import imageSrc from '../path/to/image.png';

export default const MyComponent = () => (
  <Image source={imageSrc}/>
);

What it does

The plugin does two things:

1. Copies the source image into the same directory as the destination file.
2. Replaces the image required with a module that exports the result of calling require on the copied image.

rollup-plugin-image-files's Issues

Feature request: configurable output dir

I'd like to put my image files into a subdirectory but this doesn't seem to be possible at the time.

I'd expect to be able to pass options like

imageFiles({
   dir: "./assets"
})

which would then be appended using path.resolve to the path which is currently used/extracted from the rollup config.

Is there anything which would speak against it or would a PR be appreciated?

Add support for nested output directories

I'm using this in a library which builds to dist/esm/ and dist/cjs/. This plugin fails for nested output directories.

Error: The "path" argument must be of type string

Tried including this in my rollup.config.js using

import images from 'rollup-plugin-image-files'

and also included 'image()' in the plugins section. Even without trying to import any image, it throws this error:

[!] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string
    at assertPath (path.js:39:11)
    at Object.dirname (path.js:1331:5)
    at Object.ongenerate (/home/me/my-components/my-component/src/node_modules/rollup-plugin-image-files/dist/index.cjs.js:37:21)
    at /usr/local/lib/node_modules/rollup/dist/rollup.js:19615:40
    at Array.forEach (<anonymous>)
    at /usr/local/lib/node_modules/rollup/dist/rollup.js:19613:41
    at <anonymous>

How to create dir to place the images

The images are placed in root dir now.

Create dest dir if needed

Right now, writing out files will happen before rollup has created the dest directory. We should probably handle this case and not explode.

Images into directory

Hello,

is their any way to move images into sub directory ? Currently its directly placing in the same folder.

like images({ extract: "public/images" }),

Integration into @rollup/plugin-image

Hey there. I'm currently leading the effort to migrate all of the "official" Rollup plugins into a monorepo at https://github.com/rollup/plugins. rollup-plugin-image is next on my list, and part of the migration is going to be adding some missing features that have long been requested. I was to curios to know if you're interested in integrating this plugin into the @rollup/plugin-image plugin. Cheers.