Check out this relevant codepen
I'm currently working on a project that involves generating dynamic image paths, but it seems like I might be overlooking something crucial. For some reason, the method responsible for altering the src attribute in the img tags isn't functioning as expected.
Below is the HTML snippet in question:
<div id="app">
<component v-bind:fruits="fruits" is="fruits-list"></component>
</div>
<template id="fruits-template">
<div>
<ul>
<li v-for="fruit in fruits">
{{ fruit }}
<img src="imgName(fruit)" />
</li>
</ul>
</div>
</template>
In addition, here is the relevant JavaScript code snippet:
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']
}
}
})
I did experiment with binding the src directly to the img tag like so:
<img :src="getImageUrl(fruit)" />
However, this resulted in nothing rendering at all. In situations like this, would it be more suitable to utilize methods or computed properties within an instance?