Webpack not finding image paths after removing the asset pipeline in rails 5.1.7

Question

I am working with rails 5.1.7. and trying to migrate from the asset pipeline to webpacker, I have already run rake assets:precompile

I am getting this message:

Webpacker can't find logo.png in /***/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-a5be4c0a9f54fffa5cb7.js",
  "application.js.map": "/packs/js/application-a5be4c0a9f54fffa5cb7.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-a5be4c0a9f54fffa5cb7.js"
      ],
      "js.map": [
        "/packs/js/application-a5be4c0a9f54fffa5cb7.js.map"
      ]
    }
  }
}

That's after setting my images in app/javascript/images in which I verified logo.png is there.

The line prompting this issue is:

   <%= link_to asset_pack_path('logo.png', alt: 'logo', width: 150), locale_root_path, class: 'logo'%>

If I just simply remove that line it will lead me to the path of another different image that is also in that folder (app/javascript/image).

I have this extract to configure the image path in my app/javascript/packs/application.js file is:

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

Answer 1

First you need to tell webpack that you want to use this image file, so (for example) in your app/javascript/packs/application.js file put:

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

Then confirm that the images are indeed compiled into the manifest. then to put this image into the link, try (I'm not totally sure webpacker can deal with this) image_pack_tag('media/images/logo.png')

Give it a try and let us know what happens.

Answer 2

Webpack needs to be configured to compile your images:

In your app/javascript directory, create an images folder, and place the logo.png inside.

image_tag has been changed to image_pack_tag now that your images are being compiled with webpack. However, by default you would have to pass in the entire image path each time, beginning with media/ , followed by the path from your webpack source path, which is defined in you webpacker.yml config file. For example:

<%= image_pack_tag 'media/images/logo.png', alt: 'logo', width: 150%>

To solve this, you can use require.context :

In your webpage entry point, by default this is located in app/javascript/packs/application.js , you should add the following line:

const images = require.context("../images", true);

To access the logo image in your view, you can now use:

<%= image_pack_tag 'logo.png', alt: 'logo', width: 150%>