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.
question from:https://stackoverflow.com/questions/65682827/elements-library-how-to-use-image-as-popover-item-reference
