基于JavaScript动态生成图片：无法添加宽高属性的SEO问题

我在MVC 5项目中通过代码根据div宽度动态生成图片，代码能正常运行，但最终生成的img标签里没有对SEO至关重要的width和height属性，需要解决这个问题。

现有代码 #

HTML结构：

<div id="div1" class="col-xs-12 col-sm-12 col-md-6 col-lg-6 nopadding">
      <img id="img1" class="img-responsive"/>
</div>

JavaScript代码：

$("#div1").addClass("col-md-5 col-lg-5").removeClass("col-md-6 col-lg-6");
var div = document.getElementById("div1");
var jumpwidth = parseInt(div.offsetWidth);
var img = new Image();
img.src =  '@Url.Content("~/Content/images/JumpStart.webp")';
img.onload = function() {
    var imageElement = document.getElementById("img1");
    imageElement.src = img.src;
    img.setAttribute("width", jumpwidth);
    img.setAttribute("height", parseInt(jumpwidth / 1.5, 10));
    imageElement.maxWidth = jumpwidth;
    imageElement.maxHeight = parseInt(jumpwidth/ 1.5, 10);
    imageElement.alt = "JumpStart";
    imageElement.style.marginLeft = "auto";
    imageElement.style.marginRight = "auto";
};

当前生成的img标签：

<img id="img1" class="img-responsive" src="http://localhost:6875/Content/images/JumpStart.webp" alt="JumpStart" style="margin-left: auto; margin-right: auto;">

解决方案 #

问题出在你把width和height属性设置给了临时创建的img对象，而不是页面上实际显示的imageElement（也就是#img1）。只需要修改onload函数里的代码，把属性直接添加到imageElement上即可：

$("#div1").addClass("col-md-5 col-lg-5").removeClass("col-md-6 col-lg-6");
var div = document.getElementById("div1");
var jumpwidth = parseInt(div.offsetWidth);
var targetHeight = parseInt(jumpwidth / 1.5, 10);
var img = new Image();
img.src =  '@Url.Content("~/Content/images/JumpStart.webp")';
img.onload = function() {
    var imageElement = document.getElementById("img1");
    imageElement.src = img.src;
    // 直接给页面上的img元素设置width和height属性
    imageElement.setAttribute("width", jumpwidth);
    imageElement.setAttribute("height", targetHeight);
    imageElement.maxWidth = jumpwidth;
    imageElement.maxHeight = targetHeight;
    imageElement.alt = "JumpStart";
    imageElement.style.marginLeft = "auto";
    imageElement.style.marginRight = "auto";
};

修改后生成的img标签会包含width和height属性：

<img id="img1" class="img-responsive" src="http://localhost:6875/Content/images/JumpStart.webp" alt="JumpStart" width="XXX" height="XXX" style="margin-left: auto; margin-right: auto;">

另外，也可以用更简洁的DOM属性赋值写法：

// 替代setAttribute的写法
imageElement.width = jumpwidth;
imageElement.height = targetHeight;

这样就能确保img标签带上对SEO关键的width和height属性了。

内容的提问来源于stack exchange，提问作者hncl