Vuetify с помощью VueDraggable: v-img не загружается должным образом - PullRequest
Новая
       30

Vuetify с помощью VueDraggable: v-img не загружается должным образом

0 голосов
/ 10 июля 2019

Я пытаюсь использовать 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>

1 Ответ

0 голосов
/ 18 июля 2019

Попробуйте 

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

вместо 

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

Vue loader автоматически преобразует относительные пути в требуемые функции. К сожалению, это не тот случай, когда речь идет о пользовательских компонентах. Вы можете обойти эту проблему, используя require. Если вы используете Vuetify в качестве плагина Vue-CLI 3, вы можете редактировать файл vue.config.js вашего проекта, изменив параметры vue-loader. 

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

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

Источник: Подтвердить

Надеюсь, это поможет.

...