JSFiddle - React, Tailwind, and code Playground

by Kenneth Chan

HTML

<div id="app">
    <div class="row" v-for="plant in plants">
        <img v-bind:src="'./../../assets/plants/' + plant.name + '.jpg'"> File path is {{`./../../assets/plants/${plant.name}.jpg`}}
    </div>
</div>

JavaScript

new Vue({
	el: '#app',
    data: {
    	plants: [
            { name: 'Rose', sun: 4, water: 6, care: 5, img: "./../../assets/plants/rose.jpg" },
            { name: 'Mint', sun: 8, water: 3, care: 4, img: "./../../assets/plants/mint.jpg" },
            { name: 'Thyme', sun: 7, water: 4, care: 3, img: "./../../assets/plants/thyme.jpg" },
            { name: 'Oregano', sun: 4, water: 6, care: 5, img: "./../../assets/plants/oregano.jpg" },
            { name: 'Lavanda', sun: 8, water: 3, care: 4, img: "./../../assets/plants/lavanda.jpg" },
            { name: 'Patchouli', sun: 7, water: 4, care: 3, img: "./../../assets/plants/patchouli.jpg" },
        ]
    }
});