Error in render: "TypeError: Cannot read property 'src' of undefined"

[Dagge1]

Hi I use vue-easy-lightbox component inside Vue module and it works perfectly. When I open modal with product data from the shop, when clicking on the image vue-easy-lightbox component activates and shows image. As we know Bootstrap4 modal uses global data and not local inside v-for loop that lists products.

Problem is that every time I activete lightbox component by clicking image in modal, Chrome Dev tools console shows an error from the headline. Looks like src is the problem because it is 'undefined'.

I experimented and switched parts of code that contain src attribute but problem appears only when vue-easy-lightbox component is enabled. Here is the code.

<vue-easy-lightbox :visible="visible" :imgs="imgs" :index="index" @hide="handleHide"></vue-easy-lightbox>

And the rest of the vue-easy-lightbox code is here:

showSingle() {  
     this.imgs = '/images/' + this.raw[this.mIndex].product_img;  // path is OK
     this.show();
},
show() {  // show enlarged image
     this.visible = true;
},
handleHide() {  // hide image enlargement
      this.visible = false;
}

I entered rest of the code exactly as per instructions in your page and looks like that doesn't generate error. I wonder which 'src' generates the problem.

[XiongAmao]

Hi, I'm not sure what the problem is. The imgs props has already made a type and value determination and should not be undefined. https://github.com/XiongAmao/vue-easy-lightbox/blob/540b044594cae5be0f5f8098288ec461c4faa7fc/src/vue-easy-lightbox.vue#L197-L217 Can you provide a repo?

[williamengbjerg]

I'm getting a similar error when trying to open an image.

code:

<list-gallery :page-id="{{ (isset($getSubpage) ? $getSubpage->id:$page->id) }}" :get-images={{ $listImages }}></list-gallery>

[XiongAmao]

@williamengbjerg @Dagge1 Hi, guys I release v0.13.0 to fix this problem.

You have to ensure that the index does'nt out of the imgs (imgs receives array of url or string check up here ), otherwise the order of images displayed will not match your expectations.

@williamengbjerg And :listimages="imgs" (line8) is not the correct prop.