使用VueDraggable验证: v-img未按预期加载

Question

我正在尝试使用vueDraggable与vuetify，以创建一个允许重新安排顺序的相册。

而在我添加了draggable之后，图像将不会被加载。

为了测试图像路径是否正确，我在下面添加了一个，并且正确加载了。

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来规避此问题。如果你正在使用vue-CLI3插件，你可以通过修改vue-loader的选项来编辑你的项目的vue.config.js文件。

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

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

来源：Vuetify

希望能有所帮助。