How to change the src attribute of <img> in .vue files with webpack and vue-loader?

Question

I have a vue.js (version 2.4.4) application built with webpack (version 3.6.0) and vue-loader (version 13.0.5).

In the .vue files, I need to modify the url contained in the src attribute of the <img> tags according to the environment of my application.

• In the development environment, the images must come from the application folder, with a relative path: "/src/images/exemple.png"
• In the production environment, the images must come from a cdn, with an absolute path: "https://my-cdn.net/images/exemple.png"

In the "webpack.config.js" file, I already differentiate the different environments using "process.env.NODE_ENV", like this:

const isDev = process.env.NODE_ENV === 'dev';

But I don't know how to modify the src attribute of the img tags in my .vue files with vue-loader (or with something else).

For information, here is the definition of the vue-loader in the "webpack.config.js" file:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
      ]
    }
  }
}

Is there a simple way to do this?

Answer 1

Piggybacking off of @Michael Levy's answer:

I am currently having this issue with Vue 3, @vue/cli 4.5.10, and webpack. I've solved it after much research.

Webpack configurations go into vue.config.js, where there is a lot of abstraction. To fine tune control, you can use chain webpack configs. To help you, use Vue Inspect when you are trying to access specific loaders via chaining.

$ vue inspect > output.js

That will give you a nice list of all the loaders that vue-cli is using.

For example - to modify webpack image options within vue.config.js, you can use vue inspect > output.js, search the output.js file, and discover the loader that's managing images.

Which is: /* config.module.rule('images').use('url-loader') */

To answer the question - in your vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => {

        options.name = "images/[name].[ext]";
        options.publicPath = isDev ? __webpack_public_path__ : 'https://my-cdn.net/';

        return options;
      });
  },
};

Answer 2

Vue-loader is preconfigured to handle src attributes in Vue single file components as you can see here. So for example <img src="../image.png"> in the template is transformed into:

createElement('img', {
  attrs: {
    src: require('../image.png') // this is now a module request
  }
})

What Webpack do with this require depends on configured loaders. Usual there is a file-loader configured. It looks like this (from project generated by Vue CLI + simplified):

module: { 
  rules: [
    {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
  ]
}

Loader is responsible for copying your file into dist directory and returning public URI, which will be inserted into src attribute.

So what you want can be configured here, by specifying right options. For example:

options: {
  name: 'images/[name].[ext]'
  publicPath: isDev ? __webpack_public_path__ : 'https://my-cdn.net/'
}

Just take content of dist/images directory after the build and deploy it so it is accessible by https://my-cdn.net/images and it should work....