Include pictures in JS bundle

Question

My case is the following :

I create a components library for React. So I have a package (bundled with Rollup) that include some pictures (For now only a GIF picture that is used in a component).

The component that use my picture is like this :

import React from 'react';
import PropTypes from 'prop-types';
import ui_spinner from '../../../assets/ui_progress.gif';

/**
 * CircularSpinner
 * Add a spinner when the user needs to wait
 */
class CircularSpinner extends React.PureComponent {
  static propTypes = {
    /** Width of the component */
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Height of the component */
    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Style of the component (overload existing properties) */
    style: PropTypes.object,
  }

  static defaultProps = {
    width: 128,
    height: 128,
    style: {},
  }

  render() {
    const { style, width, height } = this.props;

    return (
      <img src={ui_spinner} width={width} height={height} style={style} alt="ui_progress" aria-busy="true" />
    );
  }
}

export default CircularSpinner;

When I built it, it's OK.

Now I create a React application with create-react-app and I want to test my components library. To do this, I use npm link (To avoid to push deploy my npm package). My components are OK in my testing application but the picture (the GIF in my CircularSpinner component) is not displayed.

So my question is the following : How to include some assets in a JS bundle with Rollup ? My working approach is correct ?

My Rollup config is the following :

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import url from 'rollup-plugin-url'

const config = {
  input: 'src/index.js',
  external: ['react'],
  output: {
      format: 'umd',
      name: 'react-components',
      globals: {
          react: "React"
      }
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    uglify(),
    url(),
  ]
}
export default config

I build with rollup -c -o dist/index.js.

And the dist folder has the following content :

dist/
  assets
    92be5c546b4adf43.gif
  index.js

My component that use my picture is like this in my testing application :

<img src="92be5c546b4adf43.gif" width="128" height="128" alt="ui_progress" aria-busy="true">

Thanks for your help !

Damien

Answer 1

I found the solution for this issue. This response may help someone :

I update my rollup config to use rollup-plugin-img. I have already used it but my configuration was not correct :

The correct config is the following :

import { uglify } from 'rollup-plugin-uglify'
import babel from 'rollup-plugin-babel'
import image from 'rollup-plugin-img'

const config = {
  input: 'src/index.js',
  external: ['react'],
  output: {
      format: 'umd',
      name: 'react-components',
      globals: {
          react: "React"
      }
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
    image({
      limit: 100000,
    }),
    uglify(),
  ]
}
export default config

My error was that my GIF is a little big and the default limit size is 8192 bytes. In this case, I have the following error :

Error: Could not load <path of image> (imported by <path of component that use image>): The "path" argument must be of type string. Received type undefined

When I have updated my config to increase the limit, everything is OK