Multiple onload images need to generate new Image () one by one?

problem description

v-html limits the width of the img in the html content. Does the onload of the picture need to generate new Image () one by one

the original way of writing can only change the first one

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

changed

mounted: function () {
    this.$nextTick(function () {
        var imgs = $("-sharpinfoContent 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%");
                }
            }
        })
    })
}

need to new every img to see if there is a better way to write it

Mar.28,2021

should be able to use css to try max-width
and you jq to rewrite


it was originally recommended to use ref, but it is not feasible to see that you are using v-html. I do not know whether your html is provided by the backend or spliced by yourself. If you can add a method directly to img, you can easily achieve your needs.

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

define a global function outside vm to handle

window.onImgLoad = (el) => {
  if (el.width > 630) {
    el.style.width = '100%'
  }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb0aa3-480cb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb0aa3-480cb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?