title: Dynamically loading assets with require() that might not exist in webpack + VueJS
body: <p>I'm trying to load images dynamically which may or may not exist.</p>
  
  <p>In this case, crypto-currency icons using their 3 letter symbol. I have a few hundred in .svg format in my statics library and when I pull data from a price server I try to match up the icons I have with the symbols coming from the server and to serve a fallback image if I don't have the asset.</p>
  
  <p>In my index.vue I can get away with this code and everything works fine:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img :src="'statics/icons/svg/' + coin.symbol + '.svg'" v-img-fallback="'statics/icons/svg/fallback.svg'"/&gt;
  </code></pre>
  
  <p>However in a subcomponent that opens if a user clicks a coin the same code will fail to load both the primary and fallback images. I've tried numerous ways but the only way to get an image to load from my subcomponent is to either hard code it like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img src="statics/icons/svg/btc.svg"/&gt;
  </code></pre>
  
  <p>Which is impossible for me as I need the modal to be dynamically generated for any possible coin...</p>
  
  <p>Or using require() like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;img :src="imageSrc" v-img-fallback="require('../statics/icons/svg/fallback.svg')"/&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Computed:
  imageSrc () {
    if (this.coinData.symbol) {
       return require('../statics/icons/svg/' + this.coinData.symbol + '.svg')
    }
  }
  </code></pre>
  
  <p>However this crashes my app if <code>require()</code> looks for an asset that doesn't exist. I need a method that fails gracefully so that the <code>v-img-fallback</code> can detect it and supply the fallback.</p>
  
  <p>I've tried doing something like <code>return require(image1) || require(fallback)</code> but it doesn't work.</p>