多张图片onload需要一个个生成new Image() ?

Question

问题描述

v-html 时对html内容里的img宽度做限制，图片的onload需要一个个生成new Image() 吗

原先的写法只能改变第一张

mounted: function () {
    this.$nextTick(function () {
        var Img = new Image();
        var imgs = $("#infoContent p img");
        imgs.each(function (i, v) {
            Img.src = v.src;
            Img.onload = function() {
                if ($(v).width() > 630) {
                    $(v).css('width', '100%');
                }                                    
            }
        })
    })
}

更改后的

mounted: function () {
    this.$nextTick(function () {
        var imgs = $("#infoContent p img"), Img = [];
        imgs.each(function (i, v) {
            Img[i] = new Image();
            Img[i].src = v.src;
            Img[i].onload = function() {
                if ($(v).width() > 630) {
                    $(v).css('width', '100%');
                }
            }
        })
    })
}

需要对每个img都new一下 有没有更好的写法

Answer 1

应该能用css做到 试过max-width吗
还有你这jq混写

Answer 2

原本是建议用ref操作的，不过看到你是用v-html这个方案就不可行了，不知道你的html是后端提供的还是自己拼接的，如果可以在img上面直接加一个方法就能很简单的实现你的需求了。

data() {
  return {
    html: '<img src="xxx" onload="onImgLoad(this)">',
  }
},

在vm外面定义一个全局函数来处理

window.onImgLoad = (el) => {
  if (el.width > 630) {
    el.style.width = '100%'
  }
}