title: Generate dynamic img paths in Vue.js
body: <p><a href="https://codepen.io/modermo/pen/PJjyXr?editors=1010" rel="nofollow noreferrer">Relevant codepen</a></p>
  
  <p>I'm trying to generate dynamic image paths, but I'm missing something. For one reason or another, the method isn't executing on the <code>src</code> attribute in the <code>img</code> tags.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
  
    &lt;component v-bind:fruits="fruits" is="fruits-list"&gt;&lt;/component&gt;
  
  &lt;/div&gt;
  
  &lt;template id="fruits-template"&gt;
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li v-for="fruit in fruits"&gt;
          {{ fruit }}
          &lt;img src="imgName(fruit)" /&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And here is the relevant JS:</p>
  
  <pre><code>Vue.component('fruits-list', {
    template:'#fruits-template',
    props: ['fruits'],
    methods: {
      imgName: function(fruit){
        var imgPath = 'assets/images/' + fruit + '.jpg';
        return imgPath;
      }
    }
  })
  
  new Vue({
    el: '#app',
    data() {
      return {
        fruits: ['apple','pear','strawberry', 'peach']
      }
    }
  })
  </code></pre>
  
  <p>I also did try binding the <code>src</code> to the <code>img</code> tag like :</p>
  
  <pre><code>&lt;img :src="getImageUrl(fruit)" /&gt;
  </code></pre>
  
  <p>But that causes nothing to render at all. Is it better here to use a method or computed properties in an instance like this?</p>