Question

我正在尝试在Vuetify数据表列中显示图片，但该图片未显示在所需的广告位中，而仅显示该图片的网址，例如“ 9384053.jpg”。如何使用Vuetify中的插槽显示图像？

Segment是一个数组，其中包含图像URL，例如93034.jpg，9348903.jpg等。我试图仅显示第一个图像，例如段[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>

Answer 1

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

我应该以这种方式绑定它。

Answer 2

这似乎可以解决问题

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

https://imgur.com/a/LX7JKoy

图片未显示在Vuetify数据表插槽中

2 个答案: