webpacker: webpacker 4.0.0.rc2: images are not accessible from rails views

Hello, I’ve made a fresh webpacker 4.0.0.rc2 installation and I’m trying to load an image from assets in a rails view

<%= image_pack_tag 'test.jpg' %>

The image is located in multiple paths (app/assets/images/test.jpg, app/javascript/images/test.jpg))

I don’t see the file would be in the manifest

{
  "application.js": "/packs/application-8cac6ff83dcd20565aa4.js",
  "application.js.map": "/packs/application-8cac6ff83dcd20565aa4.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/application-8cac6ff83dcd20565aa4.js"
      ],
      "js.map": [
        "/packs/application-8cac6ff83dcd20565aa4.js.map"
      ]
    },
    "hello_vue": {
      "js": [
        "/packs/hello_vue-e8868d6621d6bbe8029c.js"
      ],
      "js.map": [
        "/packs/hello_vue-e8868d6621d6bbe8029c.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/hello_vue-e8868d6621d6bbe8029c.js",
  "hello_vue.js.map": "/packs/hello_vue-e8868d6621d6bbe8029c.js.map"
}

I though, webpacker 4.0.0rc2 has out-of-box solution for this simple use case. I won’t really import the image in application.js. I’d like to use it in the same way as using sprocket.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 17 (15 by maintainers)

Most upvoted comments

@gauravtiwari It works with importAll. But I still think this is confusing over sprocket. After reading webpacker 4.0.0 changelog, I thought this will work out-of-box. I believe many people will have a problem with this. What I post here, it’s a common use-case. And if webpacker is a replacement for sprocket and a default in rails 6.0, this will be a source of many difficulties for many.

I believe, webpacker would support the above mentioned behaviour out-of-box and support just putting any images into app/assets/images and make them accessible via image_tag/image_pack_tag/asset_.... in rails views without any need to set something somewhere by default.

Importing them via “application.js” in some cases doesn’t make sense in my point of view. Anyway, the current situation brings a lot complexity and make a simple thing much more harder.

I wish there would be some option in config/webpackeryml to set (disable if someone wants to) automatic loading images from app/assets/images into manifesto at least.

These are my thoughts about this topic

deepj on Jan 17, 2019

hey @deepj,

Does it work for you if your images are in a subfolder like so :

app/javascript/images/blog/thumbnail.jpg ?

Because it does not work for me, even with the @gauravtiwari’s importAll hack 😕

It only works for images at the root of images folder

My importAll method :

const importAll = (r) => r.keys().map(r)
importAll(require.context('../images', true, /\.(png|jpe?g|svg)$/))

EDIT: I only tried on 4.0.0.rc7

EDIT 2 :

I figured out why it does not work. It does import the images even in subfolders but with a wrong path in the manifest. It’s because of the rc6 changes https://github.com/rails/webpacker/blob/master/CHANGELOG.md#400rc6---2019-01-25

The path are now /media/{whatever}.png in the manifest even for images in subfolders. More over, if multiples images have the same name in different subfolder, it takes only the latest one

guillaumebriday on Feb 22, 2019

What happens if you do this in application.js?

// top of packs/application.js
const importAll = (r) => r.keys().map(r)
importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/));

This will load all images from images folder and then it should be available in manifest for you to pick up using asset_pack_path

gauravtiwari on Dec 18, 2018

Yes, It’s in the docs now : https://github.com/rails/webpacker/blob/master/docs/assets.md

We can close this issue.

guillaumebriday on Oct 1, 2020