<template>
<div class="htmlBox" v-html="message" @click="bigImgOpen"></div>
<!-- 图片查看弹窗 -->
<el-dialog width="40%" title="图片查看" :visible.sync="bigImgVisible">
<div style="width: 200px; margin: auto">
<img οnerrοr="this.style.display='none'" width="100%" :src="dialogImageUrl" />
</div>
</el-dialog>
<template>
<script>
export default {
name: 'subscribe',
data() {
return {
bigImgVisible: false, // 图片弹窗状态
dialogImageUrl: '', // 弹窗图片url
};
},
methods: {
bigImgOpen(e) {
if (e.target.nodeName == 'IMG') {
this.dialogImageUrl = e.target.currentSrc;
this.bigImgVisible = true;
}
},
},
}
</script>
<style lang="less" scoped>
/deep/.htmlBox {
img {
width: 200px !important;
height: 200px !important;
}
}
</style>
v-html给图片添加点击事件,限制图片大小
于 2023-07-17 10:16:43 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)
元素时打开一个40%宽度的图片查看弹窗。当用户点击的是
标签时,弹窗会显示所点击图片的源,并提供onerror处理机制以防图片加载失败。样式使用了Less,并且通过data属性和methods方法控制弹窗的可见性和图片URL。
摘要由CSDN通过智能技术生成
11-02
763
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-22
1660
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-08
5456
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)