需求：v-for循环生成列表，动态传入图片链接；图片外部容器尺寸固定，要求图片填满容器，并且不变形
大概dom长这样，很简单的一个循环
<img v-for="item in imgList" :src="item.src">
问题：传入的图片尺寸不固定，要保证图片不变形，需要通过自适应的方式，width为100%，或者高度为100%。但是图片尺寸动态变化，无法统一写成宽填满，或者统一写成高填满。
最好的办法是能够获取传入图片的宽高，通过宽高比决定使用哪种样式。
后台传入的数据是一个url，那么就需要把url转为一个图片对象，以获取它的宽高。
在网上找到了下面的方法，具体请戳这里
//加日期防止缓存
var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
// 打印
alert('width:'+img.width+',height:'+img.height);
};
初步想法是直接绑定样式
<img v-for="item in imgList" :src="item.src" :style="imgStyle(item.src)">
imgStyle(src) {
var img_url = src + Date.parse(new Date());
let img = new Image();
img.src = src;
// 加载完成执行，如果不适用onload，打印出img的宽高会都为0。
img.onload = function(){
if (img.width > img.height) {
return {height : '100%'};
} else {
return {width : '100%'};
}
}
但是没有生效，load是一个异步线程，打断点调试发现在onload异步执行完之前，图片已经全部显示在了页面上，再返回样式就无法对应是哪个图片。
同样，使用class，用这种方法绑定也不生效。
只能换一种思路了。
$event
$event是vue中用于访问原生dom对象的参数
$event
<img :onload="imgStyle($event)">
上面的写法，正常传参是可以的，但是onload这种属性写法无法识别$event这个参数，所以在这里可以使用load方法
<img @load="imgStyle($event)">
imgStyle(e) {
let img = e.target;
console.log(e.target.offsetHeight, e.target.offsetWidth);
if (img.offsetWidth > img.offsetHeight) {
img.style.height = '100%';
img.style.width = '';
} else {
img.style.height = '';
img.style.width = '100%';
}
}
当然有得必有失，要想图片填满容器，又保证不能变形，肯定会失去一部分图片内容，这里处理成图片居中显示，确保图片内容最大程度展示在容器中。(我们产品可以点击图片查看大图，展示图片所有内容)
（完整效果图待上传）
image.png
网友评论