Elements 库 - 如何使用图像作为弹出项参考

如何解决Elements 库 - 如何使用图像作为弹出项参考

我想使用 Elements popover 库 https://element.eleme.io/#/en-US/component/popover#popover 这样当我点击页面上显示液体的图像时，我可以看到一个显示更大图像的弹出窗口。 它适用于按钮，但我在图像上使用它时遇到问题。有人成功了吗？

当我评论时：

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

并添加按钮

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

我可以点击按钮来显示图片：

但是当我不这样做并单击图像时，例如酒我收到一个错误：

代码的较大部分：

                <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>

谁能解决这个问题？有没有可能解决？我认为在图像上添加 slot="reference" 就足够了，但看起来并非如此。