title: Vue.js props img src binding with webpack alias (@)
body: <p>my vue app, make img-src binding with alias. it running direct use.</p>
  
  <pre><code>&lt;img src="@/assets/search.png" /&gt;
  </code></pre>
  
  <p>But, this code make component, alias not resolve.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="button-card"&gt;
      &lt;img :src="src"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Button Card',
    props: {
      src: {
        type: String,
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>With component build result html:</p>
  
  <pre><code>&lt;div class="button-card"&gt;
    &lt;img src="@/assets/search.png"&gt;
    &lt;!-- should be with resolve: src/assets/search.png --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Webpack alias define config:</p>
  
  <pre><code>resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  </code></pre>
  
  <p>Why this code not resolve? or what can I do to make it run?</p>