BootstrapVue 在 b-table 中插入图像

Question

我正在寻找如何在 b-table 单元格内显示图像的解决方案。

我的模板：

<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 标签有关，但我不知道如何处理。

Answer 1

它在您的项目 link 中失败的原因是您为 fotografia 定义了两次模板内容：一次专门针对 fotografia，另一次在 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 && 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 },

BootstrapVue 在 b-table 中插入图像

BootstrapVue insert image inside b-table

javascript

vue.js

vue-component

vuejs2

bootstrap-vue