Szukam rozwiązania, jak wyświetlić obraz wewnątrz komórki B-Table.

Mój szablon:

<template v-slot:cell(foto)="data">
   <img class="img-fluid img-thumbnail" :src="data.item.foto" alt="..." />                 
</template>

Zdjęcia foto pole:

{ key: "foto", label: "Image", sortable: false, editable: true },

Foto Pole w przedmiotach:

{ id: 4, name: 'apple', foto: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/220px-Red_Apple.jpg'},

Niestety nie działa, widzę tylko adres URL na obraz, a nie sam. Myślę, że problem może być związany z faktem, że b-stół ucieka z tagami HTML, ale nie wiem, jak sobie z tym poradzić.

1
apb 22 listopad 2020, 19:30

1 odpowiedź

Najlepsza odpowiedź

Powodem, dla którego nie powiedzie się w linku projektu, ponieważ definiujesz zawartość szablonu dla fotografia dwa razy: raz na fotografia specjalnie w v-for, która obsługuje wszystkie elementy.

Usuń to:

<template v-slot:cell(foto)="data">
   <img class="img-fluid img-thumbnail" :src="data.item.foto" alt="..." />            
</template>

I użyj tego dla swojego v-for:

<template  v-for="field in editableFields"
           v-slot:[`cell(${field.key})`]="{ value, item}"
           >
  <b-input v-if="itemRow && itemRow.id === item.id" 
           v-model="itemRow[field.key]" :key="field.key"
           :type="field.type || 'text'" 
           :number="field.isNumber"
           >
  </b-input>
  <!-- now there is a condition for fields that have `image: true` -->
  <template v-else-if="field.image"><img :src="item.foto" /></template>
  <template v-else>{{ value }}</template>
</template>

I dodaj image: true do pola {x1}}:

{ key: "foto", label: "Image", sortable: false, editable: true, image: true },
0
shob 22 listopad 2020, 18:00