title: How to use dynamic local image in vue?
body: <p>I'm trying to show dynamic images depending on a selected option (using the template shown below), but when I deploy the app, I think Webpack changes the image filename. How can I prevent this renaming?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;select v-model=&quot;geturl&quot;&gt;
      &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;div v-if=&quot;geturl&quot;&gt;
      &lt;img
          :src=&quot;require(`@/assets/images/${geturl}.jpg`)&quot;
          style=&quot;height:250px; width:250px; object-fit:cover;&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>If I change the options in dev mode, I can see the images; but when I deploy the app, the image filename converts to <code>1.zxc123.jpg</code>.</p>
  <p><a href="https://i.stack.imgur.com/3lU4E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lU4E.png" alt="Folder structure" /></a></p>