layui显示base64图片
时间: 2023-05-15 22:07:28 浏览: 425
可以使用 layui 的图片预览组件,将 base64 编码的图片转换成图片链接,然后在页面上显示。具体实现可以参考以下代码:
```html
<!-- 引入 layui 的图片预览组件 -->
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" />
<script src="//res.layui.com/layui/dist/layui.js"></script>
<!-- 在页面上显示 base64 图片 -->
<img id="base64Img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OH
wAAAABJRU5ErkJggg==" />
<script>
// 将 base64 编码的图片转换成图片链接
var base64Img = document.getElementById('base64Img');
var imgSrc = base64Img.src;
var imgLink = document.createElement('a');
imgLink.href = imgSrc;
imgLink.download = 'image.png';
imgLink.click();
// 使用 layui 的图片预览组件显示图片
layui.use('layer', function() {
var layer = layui.layer;
layer.photos({
photos: {
title: '图片预览',
data: [{
src: imgSrc
}]
},
anim: 5
});
});
</script>
```
这样就可以在页面上显示 base64 编码的图片,并且可以使用 layui 的图片预览组件进行预览。
阅读全文