DEV Community

loading...
Cover image for Webpacker 6: Image Asset Guide

Webpacker 6: Image Asset Guide

Andrew Mason
Andrew Mason is a full stack Ruby on Rails engineer and content creator in the Ruby community.
Originally published at andrewm.codes Updated on ・1 min read

In order to use your images and SVG files with Webpacker 6, you need to put them in the correct place and import them into your context.

Install

We should be good here.

Usage

Add Assets

mkdir -p app/javascript/media/images
Enter fullscreen mode Exit fullscreen mode

Require Context

// app/javascript/packs/application.js
+
+ function importAll(r) {
+  r.keys().forEach(r);
+ }
+ // Add relevant file extensions as needed below.
+ // I'm sure there is a better way :shrug:
+ importAll(require.context('../media/images/', true, /\.(svg|jpg)$/));
Enter fullscreen mode Exit fullscreen mode

Verify

Note: Restart the dev server for good luck!

Add an SVG and PNG into app/javascript/media/images

In one of your views, add two image tags:

<img src="<%= asset_pack_path 'media/images/icon.svg' %>" />
<img src="<%= asset_pack_path 'media/images/surf.jpg' %>" />
Enter fullscreen mode Exit fullscreen mode

Reload your browser and you should see your images.

Note that <%= asset_pack_path 'media/images/icon.svg' %> only returns a string, so if you would rather inline your SVG files you will need to refer to the Webpack Asset Modules documentation and merge your changes into your Webpack context, as explained in these Webpacker docs.

Discussion (1)

Collapse
czj profile image
Clément Joubert

Thanks a lot Andrew for this guide !

I've upgraded everything to Webpacker 6 and seen nice speed improvements with Webpack 5.

One thing I did not manage to replicate is globbing for SCSS files.

With Webpacker 5 we used node-sass-glob-importer which integration with Webpacker is fairly well documented.

With Webpacker 6 the code cannot be ported 1:1 so I tried postcss-easy-import (built-in globbing, in theory) and postcss-import-ext-glob (with a special @import-glob directive) but did not manage to have dir/**/*.scss detect and import files.

Have you or anyone else encountered the need for globbing files with Webpacker 6 ?

Thanks :-)