title: binding dynamic img src in vue
body: <p>I want to bind my image src dynamically.
  <strong>my template:</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;item&quot;&gt;
          &lt;div class=&quot;img&quot;&gt;
              &lt;img v-bind:src=&quot;getImg&quot; &gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>I have a computed function:</strong></p>
  <pre><code> getImg(){
              var img=this.project['img'];
              return require(`${img}`); // i am sure img exists
          }
  </code></pre>
  <p>but i got module not found error .</p>
  <pre><code>Uncaught (in promise) Error: Cannot find module '../assets/projects/sample.jpg'
      at webpackContextResolve (eval at ./src/components sync recursive ^.*$ (app.js:1247), &lt;anonymous&gt;:15:11)
      at webpackContext (eval at ./src/components sync recursive ^.*$ (app.js:1247), &lt;anonymous&gt;:10:11)
      at Proxy.getImg (ProjectItem.vue?624f:26)
      at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
      at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:790)
      at Object.get [as getImg] (runtime-core.esm-bundler.js?5c40:5387)
      at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/ProjectItem.vue?vue&amp;type=template&amp;id=210d7dcc&amp;scoped=true&amp;bindings={&quot;project&quot;:&quot;props&quot;,&quot;key&quot;:&quot;props&quot;,&quot;getImg&quot;:&quot;options&quot;} (app.js:986), &lt;anonymous&gt;:21:19)
      at Proxy.eval (runtime-core.esm-bundler.js?5c40:1154)
      at renderComponentRoot (runtime-core.esm-bundler.js?5c40:535)
      at componentEffect (runtime-core.esm-bundler.js?5c40:4286)
  </code></pre>