// 点击图片进行放大
imgShow(e) {
const image = new Image()
image.src = e
image.onload = () => {
//创建弹出层
const previewContatiner = document.createElement('div')
previewContatiner.style.position = 'fixed'
previewContatiner.style.top = 0
previewContatiner.style.bottom = 0
previewContatiner.style.left = 0
previewContatiner.style.right = 0
previewContatiner.style.zIndex = 9999
previewContatiner.style.backgroundColor = 'rgba(0,0,0,0.8)'
previewContatiner.style.display = 'flex'
previewContatiner.style.justifyContent = 'center'
previewContatiner.style.alignItems = 'center'
document.body.appendChild(previewContatiner)
//在弹出层增加图片
const previewImage = document.createElement('img')
previewImage.src = e
previewImage.style.maxWidth = '80%'
previewImage.style.maxHeight = '80%'
previewImage.style.zIndex = 9999
previewContatiner.appendChild(previewImage)
//点击弹出层,关闭预览
previewContatiner.addEventListener('click', () => {
document.body.removeChild(previewContatiner)
})
}
image.onerror = function() {
console.log('图片加载失败')
}
},
12-29
746
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-01
2179
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-19
2195
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)