如何在 Vuetify 数据表中显示和编辑图像

如何解决如何在 Vuetify 数据表中显示和编辑图像

我在 Vuetify 数据表中有一些数据。我想在每一行都返回一个小的甜点图像。我不知道如何在 Photo column 中插入 HTML 以及如何返回图像。我使用 v-dialog 来编辑文本数据，所以我还想通过文件输入来编辑特定的照片。对于基本文本，我没有任何问题。有人可以帮忙解决这个问题吗？

演示： https://codepen.io/noobmaster2137/pen/qBqdwXN

示例： 截图

HTML：

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      sort-by="calories"
      class="elevation-1"
    >
      <template v-slot:top>
        <v-toolbar
          flat
        >
          <v-toolbar-title>Desserts</v-toolbar-title>
          <v-divider
            class="mx-4"
            inset
            vertical
          ></v-divider>
          <v-spacer></v-spacer>
          <v-dialog
            v-model="dialog"
            max-width="500px"
          >
            <template v-slot:activator="{ on,attrs }">
              <v-btn
                color="primary"
                dark
                class="mb-2"
                v-bind="attrs"
                v-on="on"
              >
                New Item
              </v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
  
              <v-card-text>
                <v-container>
                  <v-row>
                    <v-col
                      cols="12"
                      sm="6"
                      md="4"
                    >
                      <v-text-field
                        v-model="editedItem.name"
                        label="Dessert name"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      sm="6"
                      md="4"
                    >
                      <v-text-field
                        v-model="editedItem.calories"
                        label="Calories"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      sm="6"
                      md="4"
                    >
                      <v-text-field
                        v-model="editedItem.fat"
                        label="Fat (g)"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      sm="6"
                      md="4"
                    >
                      <v-text-field
                        v-model="editedItem.carbs"
                        label="Carbs (g)"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      sm="6"
                      md="4"
                    >
                      <v-text-field
                        v-model="editedItem.protein"
                        label="Protein (g)"
                      ></v-text-field>
                    </v-col>
                    <v-col
                      cols="12"
                      sm="12"
                      md="12"
                    >
                      <v-file-input
                        label="Photo"
                        v-model="editedItem.photoURL"
                        show-size
                        small-chips
                        truncate-length="15"
                      ></v-file-input>
                    </v-col>
                  </v-row>
                </v-container>
              </v-card-text>
  
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn
                  color="blue darken-1"
                  text
                  @click="close"
                >
                  Cancel
                </v-btn>
                <v-btn
                  color="blue darken-1"
                  text
                  @click="save"
                >
                  Save
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <v-dialog v-model="dialogDelete" max-width="500px">
            <v-card>
              <v-card-title class="headline">Are you sure you want to delete this item?</v-card-title>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
                <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
                <v-spacer></v-spacer>
              </v-card-actions>
            </v-card>
          </v-dialog>
          <!-- Snackbar here -->
          <v-snackbar
            v-model="snackbar"
          >
            {{ snackbarText }}
          </v-snackbar>
        </v-toolbar>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon
          small
          class="mr-2"
          @click="editItem(item)"
        >
          mdi-pencil
        </v-icon>
        <v-icon
          small
          @click="deleteItem(item)"
        >
          mdi-delete
        </v-icon>
      </template>
      <template v-slot:no-data>
        No data
      </template>
    </v-data-table>
  </v-app>
</div>

脚本：

new Vue({
  el: '#app',vuetify: new Vuetify(),data: () => ({
    dialog: false,dialogDelete: false,snackbar: false,snackbarText: 'Item has been successfully deleted',headers: [
      {
        text: 'Dessert (100g serving)',align: 'start',sortable: false,value: 'name',},{ text: 'Calories',value: 'calories' },{ text: 'Fat (g)',value: 'fat' },{ text: 'Carbs (g)',value: 'carbs' },{ text: 'Protein (g)',value: 'protein' },{ text: 'Photo',value: 'photoURL',sortable: false },{ text: 'Actions',value: 'actions',],desserts: [],editedindex: -1,editedItem: {
      name: '',calories: 0,fat: 0,carbs: 0,protein: 0,photoURL: 0,defaultItem: {
      name: '',}),computed: {
    formTitle () {
      return this.editedindex === -1 ? 'New Item' : 'Edit Item'
    },watch: {
    dialog (val) {
      val || this.close()
    },dialogDelete (val) {
      val || this.closeDelete()
    },created () {
    this.initialize()
  },methods: {
    initialize () {
      this.desserts = [
        {
          name: 'Frozen Yogurt',calories: 159,fat: 6.0,carbs: 24,protein: 4.0,// photoURL: 'IMAGE HERE',photoURL: './assets/images/desserts/1.jpg',// photoURL: require('@/assets/images/desserts/1.jpg'),{
          name: 'Ice cream sandwich',calories: 237,fat: 9.0,carbs: 37,protein: 4.3,photoURL: 'IMAGE HERE',{
          name: 'Eclair',calories: 262,fat: 16.0,carbs: 23,protein: 6.0,{
          name: 'Cupcake',calories: 305,fat: 3.7,carbs: 67,{
          name: 'Gingerbread',calories: 356,carbs: 49,protein: 3.9,{
          name: 'Jelly bean',calories: 375,fat: 0.0,carbs: 94,protein: 0.0,{
          name: 'Lollipop',calories: 392,fat: 0.2,carbs: 98,{
          name: 'Honeycomb',calories: 408,fat: 3.2,carbs: 87,protein: 6.5,{
          name: 'Donut',calories: 452,fat: 25.0,carbs: 51,protein: 4.9,{
          name: 'KitKat',calories: 518,fat: 26.0,carbs: 65,protein: 7,]
    },editItem (item) {
      this.editedindex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({},item)
      this.dialog = true
    },deleteItem (item) {
      this.editedindex = this.desserts.indexOf(item)
      this.editedItem = Object.assign({},item)
      this.dialogDelete = true
    },deleteItemConfirm () {
      this.desserts.splice(this.editedindex,1)
      this.closeDelete()
      this.snackbar = true
    },close () {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({},this.defaultItem)
        this.editedindex = -1
      })
    },closeDelete () {
      this.dialogDelete = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({},save () {
      if (this.editedindex > -1) {
        Object.assign(this.desserts[this.editedindex],this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
      }
      this.close()
    },})

解决方法

当您上传文件时，它不会只创建 url。如果您想查看您的图片，只需使用：

URL.createObjectURL(this.editedItem.photoURL);