Блог

Я пытаюсь отобразить изображения в столбце таблицы данных Vuetify, но изображение не отображается в нужном слоте и показывает только URL изображения, например «9384053.jpg «. Как отобразить изображение, используя слоты в Vuetify?

Сегмент — это массив, содержащий 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>
  

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

Я думаю, вы должны связать его таким образом.

Кажется, это помогает

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

https://imgur.com/a/LX7JKoy