Source:  Twitter logo

In webpack world I can bundle and access images as urls in the following way using file-loader

Like so:

const webpackConfig = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg)$/,
        use: [
          {loader: 'file-loader?name=[path][name].[hash].[ext]'}
        ],
        include: paths
      }
    ]
  }
}

And using it like this on a react component for example:

import foo from 'assets/images/foo.png'

function ReactFunctionalComponent () {
  return (<img src={foo} />)
}

That would put foo with the path of the image

Is there a way to do the same on rollup js so I can have an image asset as a URL with a hash inside the bundle?

You can add functionality to rollup using plugins. In this case use rollup-plugin-image (https://github.com/rollup/rollup-plugin-image) or rollup-plugin-img (https://github.com/alwaysonlinetxm/rollup-plugin-img) which seems to be more flexible.

Take into account this technique can increase the size of the file.

3 users liked answer #0dislike answer #03
Isidrok profile pic
Isidrok

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).