需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<script>标签,输入js代码:$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。
3、浏览器运行index.html页面,此时图片被js成功显示到页面上。
很显然从后端返回的是一个图片路径,那么你要做的就是把这个路径塞进img的src里面,如:<img src="路径"/>实现步骤:1.先在html里面定义一个img标签<img src=""/>
2.一般情况下图片地址是一个变量,也就是说首先将后端返回的地址保存在一个变量中,如:var imgsrc = res.data.otherImg(根据接口实际情况获取,我这里只是举例)
2.通过js把地址塞进img里面,如: $('img').attr('src', imgsrc)
这样就能把图片渲染出来了。
最好用插件,去layer官网有专门的点击图片,弹出浏览还支持多个图片。
先去官网下载layer包,你的网页引用layer的js文件。
地址:网页链接 点击相册层
然后js代码:
//调用示例
layer.ready(function(){ //为了layer.ext.js加载完毕再执行
var ps=$("#psize").val()
layer.photos({
photos: '#layer-photos-demo'
,shift: ps //0-6的选择,指定弹出图片动画类型,默认随机
})
})
html代码:
<div id="layer-photos-demo" class="layer-photos-demo" >
<img layer-pid="图片id,可以不写" layer-src="缩略图片地址" src="图片地址" alt="" style="height: 140pxwidth: 120pxborder:1px solid #bbb">
</div>