Import all files in folder

[emmanuelmillionaer]

Hi, thanks for this great gem: 💯

Instead of writing e.g. in "javascript/packs/application.js":

// images
import '../images/static/user.jpg'
import '../images/static/user.svg'
import '../images/static/team.jpg'
import '../images/static/car.jpg'
import '../images/static/yacht.jpg'
import '../images/static/plane.png'
import '../images/static/food.svg'
....

What's the best option to require all files in the images/static folder? Thanks 🙂

[rossta]

This seems like a good question for StackOverflow webpack/es6. That said, you probably want require.context.

[gauravtiwari]

@emmanuelmillionaer Couple of ways:

Using dynamic import, where you can simply require these images inline and it will work. For ex:

<img src={`${require('../static/images/foo.png')}`} />

OR, create an index.js file inside images/static with something like this:

export * from 'user.png'
export * from 'team.jpg'

and it would allow you to do:

import { user, team } from 'static/images'

OR, create a JS helper to do this as well:

const images = require.context('../images/static', true)
const imagePath = (name) => images(name, true)

// then within your component
console.log(imagePath('./user.png')) // it's relative to context

[emmanuelmillionaer]

@rossta Thank you very much, require.context works perfectly and seems like the ideal solutions. @gauravtiwari thanks for listing numerous of different approaches. Wish you both a great weekend! 💯 🙂

[aruprakshit]

So without importing the images we can't use the images from rails view? Is there anyway to tell webpacker to compiles assets from specified folder without importing them in the pack files, like sprocket used to compile all assets from app/assets folder?

[klausbadelt]

@aruprakshit I had a hard time figuring out the details too so I though I'd share here for you and others.

To use all images in a "webpacker" folder - say app/javascript/images/static - in your Rails views, add this to app/javascripot/packs/app.js (or any of your packs):

// Images
require.context('../images/static', true)

then use them in your Rails view like this, for example in app/views/layouts/application.html.erb:

<img src="<%= asset_pack_path 'media/user.jpg' %>" />

or

<%= image_pack_tag 'media/user.jpg %>

Note the media/ prefix, and dropping your original subfolder prefix. Hope this clarifies things.

[aruprakshit]

@klausbadelt Can I use asset_pack_path also in scss file for example in the background images?

[AlecRust]

Is there a JS equivalent of this for loading all JS files in a directory in to application.js?

[ibrahim-mousa]

@AlecRust Yes there is.

https://webpack.js.org/guides/dependency-management/#context-module-api

const importAll = (r) => r.keys().forEach(r);
importAll(require.context('../src/', true, /\.js$/));

[caioagiani]

const importViewScripts = (page) => page.keys().forEach(page);

document.addEventListener("turbolinks:load", () => {
  importViewScripts(require.context("../src/", true, /\.js$/));
});