Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Import all files in folder #705

Closed
emmanuelmillionaer opened this issue Aug 28, 2017 · 6 comments

Comments

@emmanuelmillionaer
Copy link

commented Aug 28, 2017

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 comment has been minimized.

Copy link
Contributor

commented Aug 28, 2017

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

@gauravtiwari

This comment has been minimized.

Copy link
Member

commented Aug 28, 2017

@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

This comment has been minimized.

Copy link
Author

commented Sep 2, 2017

@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

This comment has been minimized.

Copy link

commented Jan 17, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Feb 28, 2019

@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.

klausbadelt added a commit to klausbadelt/webpacker that referenced this issue Feb 28, 2019
As discussed in rails#705, the documentation is missing the essential addition of require.context in your app js to make the `asset_pack_path` and `image_pack_tag`
@aruprakshit

This comment has been minimized.

Copy link

commented Mar 1, 2019

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

gauravtiwari added a commit that referenced this issue Mar 18, 2019
鈥 helpers (#1969)

* Add needed require.context to use pack helpers

As discussed in #705, the documentation is missing the essential addition of require.context in your app js to make the `asset_pack_path` and `image_pack_tag`

* updated to reflect 0b86cad and PR #1964
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can鈥檛 perform that action at this time.