title: Bind Image From Array To Vue
body: <p>Can I ask for help? How do you bind an image to a vue or simply put, how do you render an image from the array to vue? I will show you my code and How I have done it and explain it carefully to you.</p>
  
  <p>Inside my template, I have this UL that displays 3 items inside my array. I wanted to retrieve my images from the array that I created on my javascript code. </p>
  
  <pre><code>&lt;ul class="list-rendering"&gt;
                  &lt;li v-for="item in items"  v-bind:key="item"&gt;
                      &lt;v-card style="padding: 10px;"&gt;
                          &lt;div class="img-cont"&gt;
                              &lt;v-img :src="require('@/assets/section/about.jpg')"&gt;&lt;/v-img&gt;
                          &lt;/div&gt;
                          &lt;div class="text-cont"&gt;
                              &lt;br&gt;
                              &lt;base-subheading&gt;{{ item.name }}&lt;/base-subheading&gt;
                              &lt;h5&gt;{{ item.price }}&lt;/h5&gt;
                          &lt;/div&gt;
                      &lt;/v-card&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  export default {
  data () {
      return {
          items: [
              {
                  img: "@/assets/section/about.jpg",
                  name: "Cuppy Cake",
                  price: "$20.00"
              },
              {
                  img: "@/assets/section/social.jpg",
                  name: "Red Velvet Cake",
                  price: "$4.99"
              },
              {
                  img: "@/assets/section/testimonials.jpg",
                  name: "Carrot Cake",
                  price: "$3.00"
              }
          ]
      }
  }
  </code></pre>
  
  <p>}</p>