title: How to change the src attribute of <img> in .vue files with webpack and vue-loader?
body: <p>I have a vue.js (version 2.4.4) application built with webpack (version 3.6.0) and vue-loader (version 13.0.5).</p>
  
  <p>In the .vue files, I need to modify the url contained in the src attribute of the <code>&lt;img&gt;</code> tags according to the environment of my application.</p>
  
  <ul>
  <li>In the development environment, the images must come from the
  application folder, with a relative path: "/src/images/exemple.png"</li>
  <li>In the production environment, the images must come from a cdn, with
  an absolute path: "<a href="https://my-cdn.net/images/exemple.png" rel="nofollow noreferrer">https://my-cdn.net/images/exemple.png</a>"</li>
  </ul>
  
  <p>In the "webpack.config.js" file, I already differentiate the different environments using "process.env.NODE_ENV", like this:</p>
  
  <pre><code>const isDev = process.env.NODE_ENV === 'dev';
  </code></pre>
  
  <p>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).</p>
  
  <p>For information, here is the definition of the vue-loader in the "webpack.config.js" file:</p>
  
  <pre><code>{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'scss': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    }
  }
  </code></pre>
  
  <p>Is there a simple way to do this?</p>