webpacker: Images not working ?

Main problem:

My images (used in css or imported from js too) are not showing.

My little research:

Here’s my manifest.json

{
  "_/_/frontend/src/components/shared/act-card-template/loading.svg": "/packs/_/_/frontend/src/components/shared/act-card-template/loading-6e55ac3085d4cd8651da32d87be226d1.svg",
  "_/_/frontend/src/components/shared/act-card-template/successBlack.svg": "/packs/_/_/frontend/src/components/shared/act-card-template/successBlack-de0a3c628cd7278df54be55bddac8fe2.svg",
  "_/_/frontend/src/components/shared/act-card-template/successGreen.svg": "/packs/_/_/frontend/src/components/shared/act-card-template/successGreen-3c4c4898f2f924212a0a11f69cd7600e.svg",
  "_/_/frontend/src/components/shared/act-card-template/successWhite.svg": "/packs/_/_/frontend/src/components/shared/act-card-template/successWhite-974fc1c1cbe6751ee469923a7ad5514d.svg",
  "_/_/frontend/src/components/shared/act-card/act-content/save-button/starBlack.svg": "/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starBlack-b7b4f99072162243573dc36373a40cde.svg",
  "_/_/frontend/src/components/shared/act-card/act-content/save-button/starDark.svg": "/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starDark-4173cc2a32cbae7f7c1a607564cc2a4c.svg",
  "_/_/frontend/src/components/shared/act-card/act-content/save-button/starGray.svg": "/packs/_/_/frontend/src/components/shared/act-card/act-content/save-button/starGray-7ef082685573660caa281c9a88782263.svg",
  "_/_/frontend/src/components/shared/act-card/act-content/update-profile/info.svg": "/packs/_/_/frontend/src/components/shared/act-card/act-content/update-profile/info-ca4b7a13cf8b16e9db2d1327cd62b574.svg",
  "_/_/frontend/src/components/shared/act-card/act-content/update-profile/user.svg": "/packs/_/_/frontend/src/components/shared/act-card/act-content/update-profile/user-8fc21994702eeed04eeb0e58f7cf4ff7.svg",
  "_/_/frontend/src/components/shared/avatar/placeholder.png": "/packs/_/_/frontend/src/components/shared/avatar/placeholder-02fc77ef408126c01fe778724da95b8d.png",
  "_/_/frontend/src/components/shared/button/spinner.svg": "/packs/_/_/frontend/src/components/shared/button/spinner-ef0d6a72d27c7ff2dd8a7e44633c4fea.svg",
  "_/_/frontend/src/components/shared/file-uploader/ic-panorama.png": "/packs/_/_/frontend/src/components/shared/file-uploader/ic-panorama-6192af34be4187bad03edcfbfa5b9e32.png",
  "_/_/frontend/src/components/shared/form/checkbox/check-symbol.png": "/packs/_/_/frontend/src/components/shared/form/checkbox/check-symbol-388a21d1895c3d5781347728e0cd878e.png",
  "_/_/frontend/src/components/shared/form/checkbox/facebook.svg": "/packs/_/_/frontend/src/components/shared/form/checkbox/facebook-a7d2e219cf52ddf3f10ae25e051e0012.svg",
  "_/_/frontend/src/components/shared/publish-act-form/facebook.svg": "/packs/_/_/frontend/src/components/shared/publish-act-form/facebook-118108b9b9d25f8a2f57c4ebf067dc03.svg",
  "application.js": "/packs/application-fc48aa5fe166535c7daa.js",
  "check-symbol.png": "/packs/66c38fac9f04cbd261a1809f4d323de9.png",
  "facebook.svg": "/packs/443ce8483351d98a6b3faaff0c734e90.svg",
  "ic-panorama.png": "/packs/9149b6f99e1b25867e8afd956f2f9528.png",
  "info.svg": "/packs/fe9435a22986ed7f6948dbfd15453f34.svg",
  "loading.svg": "/packs/19fd21c1f5f70cc53f44645d5d86bed9.svg",
  "placeholder.png": "/packs/eb2b82c57dda81c9aa7546a27b8399c1.png",
  "server-bundle.js": "/packs/server-bundle-fab377996a7864efcd1d.js",
  "spinner.svg": "/packs/704a7db74ce1094a28330dc4cfb46943.svg",
  "starBlack.svg": "/packs/2a0871cec73ef296adf025627775ef50.svg",
  "starDark.svg": "/packs/d3a436284e6bc71a7aaf468144c8c6a1.svg",
  "starGray.svg": "/packs/a7a12eb5fd39c5d8d977c4d7949c64e2.svg",
  "successBlack.svg": "/packs/5e180ce99100566a005b7ed79f67bce7.svg",
  "successGreen.svg": "/packs/e47d5dddf44ac470c1cdbe94e9bcb74b.svg",
  "successWhite.svg": "/packs/dac311d92504af9685e719d7d2901bd2.svg",
  "user.svg": "/packs/d0ba76249cc2d2190fc7af41258dffbc.svg"
}

(Bold text is an example I will talk about but everything below applies to other images too)

I use my spinner.svg in my css (.styl actually):

background: url('components/shared/act-card-template/spinner.svg') center no-repeat

In browser it looks like:

background: url(/packs/_/_/frontend/src/components/shared/button/spinner-ef0d6a72d27c7ff2dd8a7e44633c4fea.svg) center no-repeat;

Everything is ok right now. We have a strange /_/_/ in url, whatever… BUT LOOK! If you open this image, you can see there (instead of typical XML/SVG markup) some shit:

(this is ef0d6a72d27c7ff2dd8a7e44633c4fea.svg file)

module.exports = __webpack_public_path__ + "704a7db74ce1094a28330dc4cfb46943.svg";

Of course, this is not an actual image so my image is not showing:

Meanwhile, look at basic url (without /_/_/ shit; hello, spinner!):

Sorry for a bit of offensive language. But what’s wrong with these urls/images?

About this issue

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

Most upvoted comments

Just got this issue too.

Here is what worked for me, based on @arthwood’s comment:

Install the svg-react-loader package

yarn add svg-react-loader

Update the config/webpack/environment.js file like so:

const { environment } = require('@rails/webpacker')
const fileLoader = environment.loaders.get('file')

// exclude 'svg' from file loader
fileLoader.test = /\.(jpg|jpeg|png|gif|eot|otf|ttf|woff|woff2)$/i;
environment.loaders.append('svg', {
  test: /\.svg$/,
  exclude: /node_modules/,
  loader: 'svg-react-loader'
})

module.exports = environment

Restart webpack

zedtux on Oct 12, 2020

I had the same issue with both react-svg-loader and svg-react-loader so I looked at npm dependents of svg-react-loader. Inspired by https://www.npmjs.com/package/@jacobmischka/gatsby-plugin-react-svg I noticed that svg is on the test list of built in file loader. I modified my config/webpack/environment.js:

const { environment } = require('@rails/webpacker');

const fileLoader = environment.loaders.get('file');

// exclude 'svg' from file loader
fileLoader.test = /\.(jpg|jpeg|png|gif|eot|otf|ttf|woff|woff2)$/i;

environment.loaders.set('svg', {
  test: /\.svg$/,
  exclude: /node_modules/,
  loader: 'svg-react-loader'
});

module.exports = environment;

and all started working.

arthwood on Nov 14, 2017

@glevha after installing you’ll only need to add it to the plugins section in your .babelrc as you’ve described 😃

richardvenneman on Nov 9, 2017