vue.js - 使用 VueDraggable 进行 Vuetify：v-img 未按预期加载

Question

我正在尝试将 vueDraggable 与 vuetify 一起使用，以创建一个允许重新排列顺序的照片库。

如果没有 Draggable，v-img 会正确加载图像。
在我添加可拖动对象后，图像不会被加载。
为了测试图像路径是否正确，我在下面添加了一个并且加载正确。

https://codepen.io/brian661/pen/zVygap/

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <v-layout>
    <v-flex xs12>
      <v-card>
        <v-container grid-list-sm fluid>
          <v-layout row wrap>
            <draggable
                class="draggableArea"
                :list="photos"
                :group="{ name: 'photo', pull: 'clone', put: false }"
                :sort= false
            >
            <v-flex
                v-for="photo in photos"
                :key=photo.name
                xs3
                d-flex
            >
              {{photo.name}}
              <v-card flat tile class="d-flex">
                // this is not able to be loaded
                <v-img
                    :contain="true"
                    :src=photo.img
                    :lazy-src=photo.img
                    class="grey lighten-2"
                >
                  // this is loaded without problem
                  <img :src=photo.img class="Photo"/>
                  <template v-slot:placeholder>
                    <v-layout
                        fill-height
                        align-center
                        justify-center
                        ma-0
                    >
                      <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                    </v-layout>
                  </template>
                </v-img>
              </v-card>
            </v-flex>
            </draggable>
          </v-layout>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    name: "AvailablePhoto",
    components: {
      draggable,
    },
    data() {
      return {
        photos : [ {name: "photo1", img: "https://somewhere/1.png"},
          {name: "photo2", img: "https://somewhere/2.png"},
          {name: "photo3", img: "https://somewhere/3.png"},
          {name: "photo3", img: "https://somewhere/4.png"}]
      }
    }
  }
</script>

<style scoped>
  .draggableArea {
    display: flex;
  }
  .Photo {
    max-width: 100%;
    max-height: 100%;
  }
</style>

Answer 1

尝试

<v-img :src="require('photo.img')"></v-img>

代替

<v-img :src="photo.img"></v-img>

Vue loader 会自动为您将相对路径转换为 ​​require 函数。不幸的是，对于自定义组件，情况并非如此。您可以使用 require 来规避这个问题。如果您使用 Vuetify 作为 Vue-CLI 3 插件，您可以通过修改 vue-loader 的选项来编辑项目的 vue.config.js 文件。

// Incorrect
<v-img src="../path/to/img" />

// Correct
<v-img :src="require('../path/to/img')" />

资料来源：Vuetify

希望能帮助到你。