Question

我有以下问题：我正在用这样的动态src加载图像

require(`@/assets/img/${this.image}`)

imageSrc在哪里

<template>
  <div>

    <Breadcrumbs />

    <v-container fluid grid-list-md>
      <v-card class="custom-card-height">
        <v-layout row>
          <v-flex hidden-sm-and-down md6 pa-0 class="pic-cell" v-if="imageSrc">
            <img :src="imageSrc" :alt="postType">
          </v-flex>
          <v-flex md6 pa-0 class="meditation-content">
            <v-layout row wrap v-if="!loading">
              <v-flex xs6 sm3 class="entry" text-xs-center
                v-for="item of entries"
                :key="item.slug"
                @click="loadItem(item)"
              >
                <v-tooltip bottom>
                  <div slot="activator">
                    <div class="svg-inline" v-html="icon"></div>
                    <h4># {{ item.number }}</h4>
                  </div>
                  <div class="tooltip-content">
                    <h3>{{ item.title }}</h3>
                    <div v-html="item.content"></div>
                  </div>
                </v-tooltip>
              </v-flex>
            </v-layout>
            <LoadingSpinner v-else />
            <Pagination 
              v-if="pageCount"
              :page="page" 
              :pageCount="pageCount"
              @onPaginationInput="paginationHandler"
            />
          </v-flex>
        </v-layout>
      </v-card>

      <BackButton :backString="backString" :link="backLink" />

    </v-container>
  </div>
</template>

<script>
import PostMixin from '@/shared/mixins/post.mixin'
import EventBus from '@/shared/eventBus.js'
export default {
  name: 'post-list',
  mixins: [PostMixin],
  props: {
    postIcon: {
      type: String,
      required: true
    },
    image: {
      type: String,
      required: true
    },
    postType: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      icon: null,
      imageSrc: null
    }
  },
  created () {
    this.icon = require(`@/assets/icons/${this.postIcon}`)
    this.imageSrc = require(`@/assets/img/${this.image}`)
  },
  methods: {
    loadItem (item) {
      let eventString = ''
      switch (this.postType) {
        case 'meditation': eventString = 'playMeditation'; break
        case 'podcast': eventString = 'playPodcast'; break
        default: console.log('kein Posttype in PostIconList.vue')
      }
      EventBus.$emit(eventString, item)
    }
  }
}
</script>

一切正常，但是我尝试提取我的组件并遇到一些奇怪的行为。这段代码位于Podcast.vue中->可以按预期工作。我创建了一个名为PostList.vue的新文件，并将src作为道具传递。如果然后在Podcast中使用PostList组件，则Podcast页面不会按预期直接单击打开-而是等到图像完全加载后再打开页面。这将导致3-5s的延迟，这不是一个选择。它与作为prop传递的图像没有任何关系，当我对路径进行硬编码时完全相同。如果我再次从PostList中获取我的代码，然后直接在Podcast.vue中使用它-我将恢复原来的行为。这绝对是因为图像，如果我注释掉require行-没有延迟。仅在页面加载后第一次进行缓存，然后才进行缓存。

这是我完整的代码：

PostList.vue

<template>
  <PostList
    postType="podcast"
    postIcon="Icon_Pod_grau.svg"
    image="headphone-1868612_1920.jpg"
    backString="Zurück auf's Sofa"
    backLink="/sofa"
  />
</template>

<script>
import PostList from '@/components/PostList'
export default {
  name: 'kopfhoerer',
  components: {
    PostList
  }
}
</script>

Podcast.vue

import Service from '@/shared/services/post.service'
import BackButton from '@/components/BackButton'
import LoadingSpinner from '@/components/LoadingSpinner'
import Breadcrumbs from '@/components/Breadcrumbs'
import Pagination from '@/components/Pagination'

export default {
  components: {
    BackButton,
    LoadingSpinner,
    Breadcrumbs,
    Pagination
  },
  props: {
    postType: {
      type: String,
      required: true
    },
    baseType: {
      type: Boolean,
      required: false,
      default: false
    },
    detailLinkBase: {
      type: String,
      required: false
    },
    backLink: {
      type: String,
      required: false
    },
    backString: {
      type: String,
      required: false
    }
  },
  data () {
    return {
      service: {},
      entries: {},
      loading: true,
      page: 1,
      pageCount: null
    }
  },
  created () {
    this.service = new Service(this.postType, this.baseType)
    this.getPostList()
    this.getMetaData()
  },
  methods: {
    getPostList () {
      this.loading = true
      this.service.getPostList(this.page, this.activeCategory, this.activeAuthor).then(data => {
        this.entries = data
        this.loading = false
        this.pageCount = this.service.pages
      })
    },
    getMetaData () {
      this.service.getMetaData().then(data => {
        if (data.categories) this.categories = data.categories
        if (data.authors) this.authors = data.authors
      })
    },
    paginationHandler (page) {
      this.page = page
      this.getPostList()
    }
  }
}

post.mixin.js

{{1}}

预先感谢

Answer 1

据我了解，您正在imageSrc方法上设置created()属性，这意味着created()中的代码将在组件安装之前执行，这就是为什么行为，在这种情况下，我要做的是将图像设置在计算属性内，例如：

computed: {
  imageSrc() {
    return require('...');
  }
}

就像您可以确保一旦webpack加载图像并且不会影响您的应用程序行为，就可以设置图像。

剩下的就是对UI / UX进行一些调整，我建议您使用“中”之类的东西来显示占位符，直到加载图像为止，但这取决于您和您的设计:) 干杯。

Vue图像延迟渲染过程

1 个答案: