Sometimes you have to make a custom webpack config. Whether you’re working on making a vue app inside a server rendered framework like wordpress or you just decided to roll your own, this might help you if you’re having issues loading images into your components. My example will be with vue but the principal works with other front end libraries. This will assume you already have a webpack setup and are having difficulties getting images to import and load.

Instructions:

Make sure you have file-loader installed along with all your other webpack dev dependencies.

npm i -D file-loader

Then add it to your webpack config file

module: {
  rules: [
    ...

    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {}
        }
      ]
    }
  ]
}

The final trick is to make sure to include the publicPath in your webpack output config object. This is honestly the key to this entire post. It will look something like this for wordpress:

output: {
  filename: 'app.js',
  path: path.resolve(__dirname, 'assets/build'),
  publicPath: '/wp-content/themes/my-theme/assets/build/'
},

We have to not only let webpack know where to output assets from the build but also where to access them within the grand scheme of the application (from the root path of the web server). If you’re not using wordpress, just make sure that path leads to the directory where the images you import are built. After you call import on an image file in one of your js files, you should see the images being copied to your build directory. If not then you may have a problem with your webpack config file-loader.

With publicPath added in there you can now call things like this in your Vue.js components.

<template>
  <img :src="image" :alt="type" />
</template>

<script>
import icom from '../images/icon.png';

export default {
  data: function() {
    return {
      image: icom,
    };
  },
};
</script>

Good luck out there.

Written by Matt Gregg, a UI engineer who lives and works in Minneapolis, MN

Have something to say about this post? Tweet at me @itwasmattgregg