vue.js - Elements library - how to use image as popover item reference

Question

I want to use Elements popover library https://element.eleme.io/#/en-US/component/popover#popover so that when I click on the image showing the liquid on my page I could see a popover displaying a bigger image. It works on the button but I have a problem with using it on an image. Has anyone done it successfully?

When I comment:

<img
slot="reference"
:src="item.image"
class="image"
@click="showBigPicture(item)"
/>

and add button

<el-button slot="reference"
>View item image</el-button
>

I can click on the button to display image :

But when I do otherwise and click on the image e.g. wine I get an error:

Bigger part of the code:

                <el-row>
                    <el-card :body-style="{ padding: '0px' }">
                        <el-popover
                            placement="top"
                            :title="itemCategory"
                            style="height: 300px"
                            width="200"
                            trigger="click"
                        >
                            <img
                                slot="reference"
                                :src="item.image"
                                class="image"
                                @click="showBigPicture(item)"
                            />
                            <!-- <el-button slot="reference"
                                >View item image</el-button
                            > -->
                            <el-card
                                :body-style="{
                                    padding: '0px',
                                    position: absolute,
                                    transform: 'translate(-20%, 0%)'
                                }"
                            >
                                <img :src="item.image" />
                            </el-card>
                        </el-popover>
                        <div style="padding: 14px">
                            <span>{{ item.category }}</span>
                            <div class="bottom clearfix"></div>
                        </div>
                    </el-card>
                </el-row>

Can anyone solve this issue? Is is possible to be solved? I thought that addding slot="reference" on the image will be enought but it looks like it is not.

Answer 1

等待大神答复