view image in an HTML page using Vue

Question

<main id="meals">
        <h3 style="text-align: center;">Week 1 - Day 1</h3>
        <h6>{{mealType}} ( {{selectedItems}}/{{maxSelection}} selected )</h6>
        <div class="grid">
            <div v-for="item in d1w1" :key="item.id" class="option">
                <div class="optionImg">
                    <img src={{item.pic}} width="100%" height="100%" />
                </div>
                <div class="optionDetails">
                    <h4>{{item.name}}</h4>
                    <p>{{item.desc}}</p>
                </div>
            </div>
        </div>
    </main>

hi everyone, I'm trying to render an images you can see in the code above as well as other components. everything is working fine except for the image. I am not sure why.

here is the code in my main.js file

const app = Vue.createApp({
data() {
    return {
        d1w1: [
            {id: 001, name: 'arabic breakfast', desc: 'arabic food with keto bread', pic: './assets/logo_green.png'},
            {id: 002, name: 'keto crackers', desc: 'cheese and keto crackers', pic: './assets/logo_green.png'},
            {id: 003, name: 'meat shawarma', desc: 'shawrma with tahini sauce', pic: './assets/logo_green.png'},
            {id: 004, name: 'ejjah', desc: 'light omelet arab version', pic: './assets/logo_green.png' },

        ],
        mealType: 'light meal',
        selectedItems: 0,
        maxSelection: 2,
    }
},

})

Answer 1

Use

<img :src="item.pic" width="100%" height="100%" />

Working Fiddle