Question

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

在没有Draggable的情况下，v-img正确加载了图像。
添加可拖动对象后，图像将不会加载。
要测试图像路径是否正确，我在和下方添加了，并且已正确加载。

<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加载程序会自动为您将相对路径转换为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

希望有帮助。

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

1 个答案: