BootstrapVue 在 b 表中插入图像答案

【问题标题】：BootstrapVue insert image inside b-tableBootstrapVue 在 b 表中插入图像
【发布时间】：2021-03-05 11:20:51
【问题描述】：

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

【问题讨论】：

是的，我正在使用 Vue CLI。不幸的是，它没有解决问题，这是我的应用程序：[link]codesandbox.io/s/vigilant-wescoff-o5x65?file=/components/…

标签： javascript vue.js vuejs2 vue-component bootstrap-vue

【解决方案1】：

它在您的项目链接中失败的原因是因为您为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 },

【讨论】：