Vuetify: [Bug Report] v-img not loading dynamic images anymore on click

[Hypetreme]

Environment

Vuetify Version: 2.1.0
Last working version: 2.0.20
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Windows 10

Steps to reproduce

Create v-img element and pass the source a dynamic link

Expected Behavior

The image should change dynamically when on click event occurs

Actual Behavior

The default image doesn't load and also the the on click event loads the image just once

Reproduction Link

https://jsfiddle.net/q130uv2c/2/

[TimvdEijnden]

@Hypetreme I've had the same issue, but by adding eager="true" to the v-img fixes it.

[Hypetreme]

I've had the same issue, but by adding eager="true" to the v-img fixes it.

This fixes the problem. I don't know if this is the intended way now though? the documentation has the "eager" tag but no explanation about it.

[MajesticPotatoe]

Not intended, hence the regression tag. eager simply forces the components content to render on mounted (instead of lazy by default). Will have to fix the prop description (simple fix there).

[sleepypeepee]

I'm also experiencing this issue since updating to v2.1.1. Very annoying because I though it was an issue linked to data propagation / reactivity in my app, so I did hours of investigation only to find it was a bug with the v-img component. Using the eager prop solves the issue for now, thankfully.

I adore the Vuetify framework - it's absolutely sublime frankly - but that just makes it all the more disappointing when fundamental issues like are introduced when simply upgrading between minor versions. Oh well, such is the nature of web development. Thank you in advance for your proactive attitude towards fixing this.

[isokosan]

For a temporary fix, I assigned the src value to the key prop on the v-img component to force it to re-render. Just wanted to share here if a similar issue occurs in the future.

[rhyswilliamsza]

@Hypetreme I've had the same issue, but by adding eager="true" to the v-img fixes it.

This issue is still present in latest pull, however this fix worked for me.

[GustavoEdny]

@rhyswilliamsza the same here on 2.1.0

[nurzhannogerbek]

Guys, how you solve this problem? I have the same problem. The version of Vuetify which I use is 2.2.4.

[GustavoEdny]

@Hypetreme I've had the same issue, but by adding eager="true" to the v-img fixes it.

@NogerbekNurzhan this solve the problem for me

[nurzhannogerbek]

@GustavoEdny I already tried to add this property but for some reason, it doesn't work for me. In my case, I have two unrelated components. The first component has a button. When the user clicks that button I pass some paraments by EventBus. After that, in the second component, I see the image without any problem (STEP 1). Also, my code makes that image invisible (STEP 2). The problem happens when I try to change the image src with the other image (STEP 3). Also in the console of browser, I notice an error that says that eager expects Boolean but it takes String. For that's why I tried to change it to :eager="true". What can you recommend in my case? I am really confused.

The first component (button click event logic):

// STEP1: Show the logo image.
EventBus.$emit('showLegend', {
    imageName: 'logo',
    legendVisible: true
})

// STEP 2: Make the image invisible.
EventBus.$emit('showLegend', {
    imageName: 'logo',
    legendVisible: false
})

// STEP 3: Show other image.
EventBus.$emit('showLegend', {
    imageName: 'person',
    legendVisible: true
})

The second component:

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

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

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

[KirankumarAmbati]

@Hypetreme I've had the same issue, but by adding eager="true" to the v-img fixes it.

Worked for me. Thanks!