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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image asset folders don't seem to be compiled #109

Closed
zeetao opened this issue Dec 21, 2018 · 3 comments
Closed

Image asset folders don't seem to be compiled #109

zeetao opened this issue Dec 21, 2018 · 3 comments

Comments

@zeetao
Copy link

zeetao commented Dec 21, 2018

I have javascript, css and font assets placed in app/javascript/packs and images in app/javascript/images, both in several nested folders.

The images do not seem to get compiled. I wonder if I am specifying the path wrong somewhere. Where do I instruct webpack to compile the image assets?

application.rb
Jets.application.configure do config.assets.folders = %w[public] # defaults to public config.assets.max_age = 3600 # when to expire assets end

@zeetao zeetao changed the title Nested asset folders don't seem to be compiled Image asset folders don't seem to be compiled Dec 21, 2018
@tongueroo
Copy link
Collaborator

Thinking you have to add import statements. This might help https://github.com/tongueroo/jets-example-crud-html/blob/master/app/javascript/packs/application.js

@tongueroo tongueroo added the pending issuer Awaiting action from issuer label Dec 22, 2018
@zeetao
Copy link
Author

zeetao commented Dec 22, 2018

Hmm... am not sure what you mean. I tried adding more directories to the webpacker.yml file for it to compile but it didnt work.
The reference at http://rubyonjets.com/docs/assets-serving/ states that I should put images into the app/javascript/images folder, but this does not work.
If I put all images into app/javascript/packs, then it does get compiled, but then it converts all my images into .js extensions.....

These paths in webpacker.yml:
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker

I tried the below and it still didn't work
source_entry_path: [packs, images]
source_entry_path: ['packs', 'images']
source_entry_path: %w[packs images]

I tried importing as you suggested but it looks odd and also didn't work.
import '../images/'

What am I doing wrong?

@tongueroo
Copy link
Collaborator

Made some webpacker fixes in the latest release, so first upgrade. Then to import images you actually have to import them explicitly. So this that code won't work 😞

import '../images/'

Something like this will work:

import '../images/path/to/full/image.png'

It’s not great to have to import a large number of image explicitly though. Googled around and it looks like what folks are doing with webpacker is using ERB to loop and import a bunch of files dynamically. Started taking a look at getting webpacker with ERB working but afraid don’t have the time right now. Would be awesome if someone takes a stab at this and would happily take this PR. IMHO, it’s a great way to learn if you want to have a stab at it also. No sweat either way though 👌

Closing this out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants