title: view image in an HTML page using Vue
body: <pre><code>&lt;main id=&quot;meals&quot;&gt;
          &lt;h3 style=&quot;text-align: center;&quot;&gt;Week 1 - Day 1&lt;/h3&gt;
          &lt;h6&gt;{{mealType}} ( {{selectedItems}}/{{maxSelection}} selected )&lt;/h6&gt;
          &lt;div class=&quot;grid&quot;&gt;
              &lt;div v-for=&quot;item in d1w1&quot; :key=&quot;item.id&quot; class=&quot;option&quot;&gt;
                  &lt;div class=&quot;optionImg&quot;&gt;
                      &lt;img src={{item.pic}} width=&quot;100%&quot; height=&quot;100%&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;optionDetails&quot;&gt;
                      &lt;h4&gt;{{item.name}}&lt;/h4&gt;
                      &lt;p&gt;{{item.desc}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  </code></pre>
  <p>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.</p>
  <p>here is the code in my main.js file</p>
  <pre><code>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,
      }
  },
  </code></pre>
  <p>})</p>