title: Bind dynamic Vue image src from node_modules
body: <p>I' am creating a Vue component that shows an SVG image from my node modules based on a given image name or key (given by an API).</p>
  <p>If I put the source image directly like <code>~cryptocurrency-icons/svg/color/eur.svg</code>, the resource loads.</p>
  <p>But if I try to compute it with the props or by the mounted method asigning it using <code>:src=&quot;imageSource&quot;</code> it does not load.</p>
  <p>I'm new to Vue so I don't know why is this happening? Should I use images downloaded in a public directory instead of the NPM package?</p>
  <pre><code>&lt;template lang=&quot;html&quot;&gt;
  &lt;img src=&quot;~cryptocurrency-icons/svg/color/eur.svg&quot;  alt=&quot;icon&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;js&quot;&gt;
  export default {
      name: 'crypto-icon',
      props: ['currency'],
      mounted() {
          this.imageSource = `~cryptocurrency-icons/svg/color/${this.currency}.svg`
      },
      data() {
          return {
              imageSource: &quot;&quot;
          }
      },
      methods: {
          getImageResource(){
              return `~cryptocurrency-icons/svg/color/${this.currency}.svg`
          }
      },
      computed: {
  
      }
  }
  &lt;/script&gt;
  
  &lt;style lang=&quot;scss&quot; scoped&gt;
  .crypto-icon {}
  &lt;/style&gt;
  </code></pre>