v-img 加载动态图像引发错误 [Vuetify] 图像加载失败答案

【问题标题】：v-img load dynamic images raise eror [Vuetify] Image load failedv-img 加载动态图像引发错误 [Vuetify] 图像加载失败
【发布时间】：2020-05-03 02:27:24
【问题描述】：

就我而言，我有两个不相关的组件。第一个组件有一个按钮。第二个组件具有 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>

【问题讨论】：

点击按钮时尝试登录控制台data。
我已经检查了data 的值。我看到了正确的参数。就我而言，我想使用相同的 URL 更新图像。这会是问题的原因吗？
尝试使用v-else 并通过替换图像传递另一个。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

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

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

我觉得很不满意。

【讨论】：