Question

就我而言，我有两个不相关的部分。第一个组件有一个按钮。第二个组件具有Vuetify框架的<v-img>元素。我使用的Vuetify版本为2.2.4。当用户单击按钮时，我会通过EventBus传递一些参数。单击后，我想更改第二个组件中的图像。由于某些原因，在控制台中，我看到了该错误：[Vuetify] Image load failed。 eager属性无效。我也将v-img更改为img。结果是一样的。图像不变。您认为该如何解决此问题？

第一个组件（按钮点击事件逻辑）：

EventBus.$emit('showLegend', {
    imageName: 'http://domain/logo.png',
    legendVisible: true
})

第二部分：

<template>
    <v-img
      eager
      v-if="legendVisible"
      :src="legendURL">
    </v-img>
</template>

<script>
import { EventBus } from '../../services/events.js'

export default {
  data () {
    return {
      legendURL: 'http://domain/logo.png',
      legendVisible: true
    }
  },
  created () {
    EventBus.$on('showLegend', data => {
      if (data) {
        this.legendURL = data.imageName
        this.legendVisible = data.legendVisible
      }
    })
  }
}
</script>

Answer 1

所以您是说图像已正确绑定并显示，但问题在于通过 EventBus 发出后 URL 发生了变化？如果它首先不起作用，我会假设您可能需要与 require 相关的东西。很多时候对于静态图像，这就是问题所在。你必须写

<v-img src="require('http://domain/logo.png')"></v-img>

但是，在我使用之前，我无法让这个语法与我自己的来自 v-for="card in card" 的动态变量一起使用

<v-img  :src="require('@/assets/' + card.imgSrc + '.jpg')"></v-img>

我觉得很不满意。

v-img加载动态图像会导致错误[Vuetify]图像加载失败

1 个答案: