Placeholder functionality breaks during Cyrpess tests and after prod build

[dsolanorush]

@pi0 @treboryx - I am seeing issues with this chunk of code during Cypress testing and after a production build:

img.onload = () => {
  this.$refs.img.src = this.nMainSrc;
  this.placeholderLoaded = true;
};

this.$refs.img is undefined when using the placeholder functionality, resulting in the error Cannot set properties of undefined (setting 'src')

The solutions that worked for me are:

1. Simply don't use placeholder prop
2. Add a check for existence of this.$refs.img in img.onload

[treboryx]

Hi there! Thank you for your valuable feedback!

That is weird considering the ref should always be there as seen here:

<img :key="nSrc" v-bind="nAttrs" ref="img" :src="nSrc">

but I'll take a look!

EDIT: I'll probably need an example app where the issue is reproduceable since this looks concerning to me:

[dsolanorush]

Hey Robert,

I echo those sentiments, very odd. Thank you for looking into it!

https://www.rushmarket.com/ Drey Solano STAFF Software Engineer technology WWW.RUSHMARKET.COM https://www.rushmarket.com/ https://www.facebook.com/therushmarketomaha https://instagram.com/therushmarketomaha

On Tue, Aug 2, 2022 at 1:22 PM Robert @.***> wrote:

Hi there! Thank you for your valuable feedback!

That is weird considering the ref should always be there as seen here:

but I'll take a look!

— Reply to this email directly, view it on GitHub https://github.com/nuxt/image/issues/580#issuecomment-1203068105, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUPH33BXNL5WBVVLWLLRC4TVXFRM3ANCNFSM55L3VGMQ . You are receiving this because you authored the thread.Message ID: @.***>

[greetfish]

HI，how to do this 【Add a check for existence of this.$refs.img in img.onload】?