Блог

Главная - Вопросы по программированию - BootstrapVue вставить изображение внутри b-таблицы

BootstrapVue вставить изображение внутри b-таблицы

#javascript #vue.js #vuejs2 #vue-component #bootstrap-vue

#javascript #vue.js #vuejs2 #vue-компонент #bootstrap-vue

Вопрос:

Я ищу решение, как отобразить изображение внутри ячейки b-таблицы.

Мой шаблон:

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

Фотографии поле фото:

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

Поле Фото в элементах:

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

К сожалению, это не работает, я вижу только URL-адрес изображения, а не само изображение.
Я думаю, что проблема может быть связана с тем фактом, что b-table экранирует HTML-теги, но я не знаю, как с этим бороться.

Комментарии:

1. Да, я использую Vue CLI. К сожалению, это не решило проблему, вот мое приложение: [ссылка] codesandbox.io/s/vigilant-wescoff-o5x65?file=/components /…

Ответ №1:

Причина сбоя в вашей ссылке на проект заключается в том, что вы определяете содержимое шаблона fotografia дважды: один раз fotografia специально и снова в a v-for , который обрабатывает все элементы.

Удалите это:

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

И используйте это для вашего v-for :

 <template  v-for="field in editableFields"
           v-slot:[`cell(${field.key})`]="{ value, item}"
           >
  <b-input v-if="itemRow amp;amp; 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>

И добавить image: true в свое foto поле:

 { key: "foto", label: "Image", sortable: false, editable: true, image: true },
Метки: