如何在JavaScript函数中为URL图片设置自定义宽高并单独控制？

我正尝试在JavaScript函数中为URL图片设置自定义宽高，目前这些图片尺寸各不相同，希望能够单独控制每张图片的尺寸，求一种简单的实现方式。以下是我的现有代码：

原JavaScript代码 #

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

// const IMAGE_SOURCE = "https://example.com/images/";
// const IMAGE_EXTENSION = ".png";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;

  switch (combo.options[combo.selectedIndex].text) {
    case '"red" + "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      break;
    case '"blue" + "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      break;
    case '"green" + "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      break;

    default:
      string_determine = "NONE";
  }

  let myBoxHTML = `<p>${string_determine}</p><img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}">`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

原HTML代码 #

<!doctype html>
<html>
<select name="string_determine" id="string_determine">
  <option value>Select Value</option>
  <option value='"red" + "blue"'>"red" + "blue"</option>
  <option value='"blue" + "green"'>"blue" + "green"</option>
  <option value='"green" + "red"'>"green" + "red"</option>
</select>

<button onclick="tests()">Yes</button>

<div class="container">
  <h3>Selection</h3>
  <div id="mybox" class="box">
  </div>
</div>

<script src="script.js" async defer></script>

</html>

实现方案 #

可以通过为每种图片类型绑定专属宽高参数的方式，在生成img标签时直接注入尺寸属性，实现单独控制。这里提供两种简洁的实现思路：

思路一：在switch分支中定义宽高变量 #

修改JavaScript代码，在每个case里添加对应图片的宽高，然后在模板字符串中插入width和height属性：

var IMAGE_SOURCE = "";
var IMAGE_EXTENSION = "";

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;
  let imgWidth = "";
  let imgHeight = "";

  switch (combo.options[combo.selectedIndex].text) {
    case '"red" + "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      IMAGE_SOURCE = "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip";
      IMAGE_EXTENSION = ".png";
      imgWidth = "200"; // 自定义紫色图片宽度
      imgHeight = "150"; // 自定义紫色图片高度
      break;
    case '"blue" + "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      IMAGE_SOURCE = "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash";
      IMAGE_EXTENSION = ".png";
      imgWidth = "250"; // 自定义青绿色图片宽度
      imgHeight = "200"; // 自定义青绿色图片高度
      break;
    case '"green" + "red"':
      string_determine = "brown";
      div.style.color = "brown";
      IMAGE_SOURCE = "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint";
      IMAGE_EXTENSION = ".png";
      imgWidth = "180"; // 自定义棕色图片宽度
      imgHeight = "180"; // 自定义棕色图片高度
      break;

    default:
      string_determine = "NONE";
  }

  // 仅当图片存在时生成img标签
  let imgHTML = string_determine !== "NONE" ? `<img src="${IMAGE_SOURCE}${string_determine}${IMAGE_EXTENSION}" width="${imgWidth}" height="${imgHeight}">` : "";
  let myBoxHTML = `<p>${string_determine}</p>${imgHTML}`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

思路二：用配置对象统一管理图片信息 #

如果后续需要添加更多图片，用配置对象管理会更易维护：

// 统一配置所有图片的信息：文本、颜色、地址、宽高
const IMAGE_CONFIGS = {
  '"red" + "blue"': {
    text: "purple",
    color: "purple",
    source: "https://www.kindpng.com/picc/m/48-486841_purple-paint-splatter-clipart-purple-paint-splatter-clip",
    extension: ".png",
    width: "200",
    height: "150"
  },
  '"blue" + "green"': {
    text: "turquoise",
    color: "turquoise",
    source: "https://p.kindpng.com/picc/s/428-4289893_turquoise-splotch-svg-clip-arts-yellow-colour-splash",
    extension: ".png",
    width: "250",
    height: "200"
  },
  '"green" + "red"': {
    text: "brown",
    color: "brown",
    source: "https://www.pngkey.com/png/detail/28-287400_splatter-vectors-photos-and-psd-files-brown-paint",
    extension: ".png",
    width: "180",
    height: "180"
  }
};

function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let selectedText = combo.options[combo.selectedIndex].text;
  let config = IMAGE_CONFIGS[selectedText];
  
  let string_determine = "NONE";
  let imgHTML = "";
  
  if (config) {
    string_determine = config.text;
    div.style.color = config.color;
    imgHTML = `<img src="${config.source}${config.text}${config.extension}" width="${config.width}" height="${config.height}">`;
  }

  let myBoxHTML = `<p>${string_determine}</p>${imgHTML}`;
  console.log(myBoxHTML);
  document.getElementById("mybox").innerHTML = myBoxHTML;
}

说明：两种方式都能实现单独控制每张图片的尺寸，思路二更适合扩展，后续新增图片只需在配置对象中添加对应项即可。

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