webpacker: Images Not Working as Documentation States:

Image Pack Tag Not Working

// package.json
{
  "name": "mfcs",
  "private": true,
  "dependencies": {
    "@rails/webpacker": "^4.0.7",
    "babel-plugin-module-resolver": "^3.2.0",
    "normalize.css": "^8.0.1",
    "postcss-focus": "^4.0.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

I was following this documentation in getting webpacker working with Rails.
The <%= image_pack_tag 'mfcs.png' %> is not allowing my image to show.
Directory structure as I see it should be
manifest.json

Debugging Attempts

Tried to use this open issue to solve the problem. Neither of these in the application.js file fix the issue.

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

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

Moving the Images folder under packs, which doesn’t feel right to me, but if it works it doesn’t really matter I guess.
It still doesn’t yield the image but gives a better looking manifest.

Notes:

I’m running on Docker, here is my compose file.

version: '3'
services:
  db:
    container_name: db
    restart: always
    image: postgres:10
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_PASSWORD=docker
    volumes:
      - ./postgresdata/db:/data/db

  elasticsearch:
    image: elasticsearch:6.6.0
    container_name: elasticsearch
    restart: always
    volumes: 
      - ./search_data:/usr/share/elasticsearch/data
    ports: 
      - 9200:9200
      - 9300:9300
  
  webpacker:
    build: .
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
    command: ./bin/webpack-dev-server
    volumes:
      - .:/home/mfcs
    ports:
      - '3035:3035'
  
  mfcs: 
    build:
      context: ./
      dockerfile: Dockerfile
    tty: true
    stdin_open: true
    container_name: mfcs
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    environment:
      - SECRET_KEY_BASE=test
      - DATABASE_PASSWORD=docker
      - ELASTICSEARCH_URL=http://elasticsearch:9200
      - TERM=xterm 
      # - SELENIUM_REMOTE_HOST=selenium
      # - RAILS_ENV=production # replace with your current environment development or production
    volumes:
      - ./:/home/mfcs
    ports:
      - "3000:3000" 
      - "3001:3001"
    links:
      - elasticsearch
      - db

Everything else is default from the install of webpacker.

Solution ?

I was able to get it to show an image by using <%= image_pack_tag 'media/packs/images/mfcs.png' %>, but this doesn’t seem like it is correct. However it does work.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 7
Comments: 15 (3 by maintainers)

Most upvoted comments

I know this doesn’t help to resolve the actual problem being discussed here, but I think I found a slightly more appealing solution temporarily that I thought I’d share in case others wanted to use it. I was able to keep the desired asset files in the parent directory under app/webpacker/ (e.g., app/webpacker/images). I then created a pack manifest entry file in app/webpacker/packs that I named to reflect the asset type (e.g., app/webpacker/packs/images.js or app/webpacker/packs/fonts.js). Inside that file I used the sample code from the primary application.js:

// app/wepbacker/packs/images.js
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.

// import all image files in a folder:
require.context('../images', true)

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

I’m not sure if the JS helpers work yet, but I am able to access images in my Rails views by adding the following to my application view: <%= javascript_pack_tag 'images', 'data-turbolinks-track': 'reload' %> and then using the following in my views: <%= image_pack_tag('media/images/<img_filename>.jpg %>`

Hopefully this works for others as a clean temporary fix. It should help to at least avoid having the extra packs portion of the path to remove down the line.

stevenhaddox on Sep 5, 2019

If this helps, the documentation instructions works only if you DON’T have an application.css/scss file along with application.js at /packs.

So, this works:

Screen Shot 2020-12-16 at 12 41 55 AM

// packs/application.js

import '../stylesheets/application.scss'
require.context('../images', true)

It emits both application.css at packs/css and all the images at packs/media/images.

This doesn’t work:

Screen Shot 2020-12-16 at 12 42 57 AM

// packs/application.js

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

This also works:

Screen Shot 2020-12-16 at 12 44 07 AM

// packs/application.js

// not requiring images here

// packs/images.js

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

arielj on Dec 16, 2020

I can confirm that this is an issue in a newly created rails 6 app. I uncommented the following lines that come with a freshly created app:

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.

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

Added an app/javascript/images folder, but when I try to access <%= image_pack_tag "landing/coming-soon.jpg" %> to use the image at this location app/javascript/images/landing/coming-soon.jpg, I get the following exception:

ActionView::Template::Error (Webpacker can't find landing/coming-soon.jpg in /Users/amit/dawn/code/dawn/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-9b8d3ff5f59a10b19a10.js",
  "application.js.map": "/packs/js/application-9b8d3ff5f59a10b19a10.js.map",
  "application/index.js": "/packs/js/application/index-fc1672c94d4e52b14928.js",
  "application/index.js.map": "/packs/js/application/index-fc1672c94d4e52b14928.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-9b8d3ff5f59a10b19a10.js"
      ],
      "js.map": [
        "/packs/js/application-9b8d3ff5f59a10b19a10.js.map"
      ]
    },
    "application/index": {
      "js": [
        "/packs/js/application/index-fc1672c94d4e52b14928.js"
      ],
      "js.map": [
        "/packs/js/application/index-fc1672c94d4e52b14928.js.map"
      ]
    }
  }
}

The image seems to be missing in logs of bin/webpack-dev-server. I was trying to switch from using the asset pipeline (for static assets) to using webpacker for everything, but the experience is far from smooth. I have spent hours trying to figure this out with no success.

amitsaxena on Oct 14, 2019

If this helps, the documentation instructions works only if you DON’T have an application.css/scss file along with application.js at /packs.

So, this works:
// packs/application.js

import '../stylesheets/application.scss'
require.context('../images', true)
It emits both application.css at packs/css and all the images at packs/media/images.

This doesn’t work:
// packs/application.js

require.context('../images', true)
This also works:
// packs/application.js

// not requiring images here
// packs/images.js

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

Just created a brand new rails app last night and ran into this problem (having both a js and scss pack was causing images not being included in the manifest).

This gentleman’s answer about creating a separate image pack solved it for me, post-haste. Cheerio!

TheBrockEllis on Nov 14, 2021