Блог

Я пробовал различные способы назвать путь к изображению в массиве, но пока не пришел к правильному решению. Я называю это неправильно в части HTML/Vue или делаю это совершенно неправильно?

 <div id="gallery">
  <ul>
    <!-- the list displays the vue object -->
    <li v-for="item in items" :key="item.id">
      <div id="pic">{{item.image}}</div>
      <div id="name">{{item.name}}</div>
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  let galleryItems = new Vue({
        el: '#gallery',
        data: {
          items: [{
                id: 1,
                name: 'Double King Sized Bed',
                image: (url('images/beds/bigWhiteBed.jpg')),
                price: 20000,
                description: 'A double king sized bed with a white interior and a black cover'
              },
              {
                id: 2,
                name: 'Queen Sized Bed with Storage Drawers',
                image: 'images/beds/darkDrawerBed.jpg',
                price: 15000,
                description: 'A queen sized bed with a dark storage drawer'
              },

                    
 

вот, пожалуйста

У вас была куча ошибок, поэтому я исправил их

этот код выполняется

 <div id="gallery">
  <ul>
    <!-- the list displays the vue object -->
    <li v-for="item in items" :key="item.id">
      <div><img :src="item.image"/></div>
      <div>{{item.name}}</div>
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  let galleryItems = new Vue({
    el: '#gallery',
    data: {
      items: [{
          id: 1,
          name: 'Double King Sized Bed',
          image: 'images/beds/bigWhiteBed.jpg',
          price: 20000,
          description: 'A double king sized bed with a white interior and a black cover'
        },
        {
          id: 2,
          name: 'Queen Sized Bed with Storage Drawers',
          image: 'images/beds/darkDrawerBed.jpg',
          price: 15000,
          description: 'A queen sized bed with a dark storage drawer'
        }
      ]
    }
  })
  </script>