图像未显示在 Vuetify 数据表槽中答案

【问题标题】：Image not showing in Vuetify data table slot图像未显示在 Vuetify 数据表槽中
【发布时间】：2020-08-26 19:31:43
【问题描述】：

我正在尝试在 Vuetify 数据表列中显示图像，但图像未显示在所需的插槽中，并且仅显示图像的 URL，例如“9384053.jpg”。如何在 Vuetify 中使用插槽显示图像？

Segment 是一个包含图像 URL 的数组，例如 93034.jpg、9348903.jpg 等。我试图仅显示第一张图像，例如Segment[0]，样本输出为 846454.jpg。

<v-card>
  <v-card-title>
    Animals
    <v-spacer></v-spacer>
  </v-card-title>
  <v-data-table
    :headers="headers"
    :items="entries"
    :items-per-page="12"
    class="elevation-3"
    :multi-sort="true"
    mobile-breakpoint
    :search="search"
  >

    <template v-slot:item.Image="{ item }">
      <img :src="require(`${item.Image}`)" style="width: 50px; height: 50px" />
    </template>
  </v-data-table>
</v-card>

这是脚本文件

<script>
import firebase from '../firebaseConfig';
const db = firebase.database().ref('/');

export default {
  name: 'Animals',
  data: () => ({
    search: '',
    entries: [],
    headers: [
      { text: 'ID', value: 'ID' },
      { text: 'RFID', value: 'RFID' },
      { text: 'Image', value: 'Segment[0]' },
      { text: 'Age', value: 'Age Years' },
      { text: 'Weight', value: 'Weight' },
    ],
  }),
  methods: {
    readAnimals() {
      db.once('value', (snapshot) => {
        snapshot.forEach((doc) => {
          const dataRetrieve = doc.val();
          this.$data.entries.push({
            ID: dataRetrieve.ID,
            RFID: dataRetrieve.RFID,
            'Age Years': dataRetrieve['Age Years']
            Weight: dataRetrieve.Weight,
            Length_History: dataRetrieve['Length_History'],
            Length: dataRetrieve.Length,
            Tag: dataRetrieve.Tag,
            Head: dataRetrieve.Head,
            Segment: dataRetrieve.Segment,

          });
        });
        return this.$data.entries;
      }).catch((error) => {
        console.log('error getting documents', error);
      });
    },
 
  },
  mounted() {
    this.readAnimals();
  },
};
</script>

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

  <template v-slot:item.Image="{ item }">
  <img :src="item.Image" style="width: 50px; height: 50px" />
 </template>

我认为你应该这样绑定它。

【讨论】：

这行得通。只需要将 Image 替换为 Segment[0]
抱歉，我在发布的代码中没有看到这一点，但我希望我的回答能给您提供有关如何绑定图像的线索。如果答案有效，请尝试接受它。

【解决方案2】：

这似乎可以解决问题

<template v-slot:item.Segment[0]="{item}">
      <img :src="item.Segment[0]" style="width: 50px; height: 50px" />
</template>

https://imgur.com/a/LX7JKoy

【讨论】：