1.在编辑器传入的图片尺寸大都比h5宽,
如果直接用v-html渲染传回的标签代码,则图片显示则很大
2,获取到后台数据时,程序已经渲染了页面,然后开始处理图片
样式,id为box-show
<div id="box-show" class="mgt-10" v-html="mes.content">
this.$nextTick(()=>{
this.checkImg()
})
获取已经被v-html渲染的节点,并获取其中img标签
checkImg(){
obj=document.getElementById('box-show').getElementsByTagName('img')
if(obj){
for(let i=0;i<obj.length;i++){
this.getImgInfo(obj[i].src,i)
}
}
},
有时候不止一个图片,会有多个图片。所以在图片节点循环,获取图片真实大小,如果超过屏幕宽度则进行适应移动端宽度处理
getImgInfo(url,i){
let image = new Image();
let w,h;
image.src = url;
console.log('dj')
image.onload=function(){
w=image.width
console.log(image.width)
h=image.height
if(windowWidth<=w){
obj[i].style.width='100%'
}
image.onload=null
}
},