title: dynamic path in image src vue
body: <p>There are many questions already asked on how binding image <code>src</code> is not working, and I've gone through them, which mentions to import the image using <code>require</code>. However, my question is a bit different: I am changing the image <code>src</code> based on the current <code>locale</code> the user has selected. I tried binding just a string in <code>src</code> based on <code>currentLocale</code>, but the image is not loading. I also tried <code>require</code> in the binding.</p>
  
  <p><em>File structure for assets:</em></p>
  
  <pre><code>+ en
  `-- download.jpeg
  |
  + fr
  `-- download.jpeg
  </code></pre>
  
  <p><em>My component:</em></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;img :src="'../assets/en/' + this.currentLocale + '/download.jpeg'"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  //import { imageSrc } from "@/assets/en/download.jpeg";
  export default {
    name: "HelloWorld",
    data() {
      return {
        currentLocale: "en"
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/vue-template-ek8iz" rel="nofollow noreferrer">codesandbox</a></p>