如何在JavaScript中添加本地图片而非URL链接及解决图片加载问题

一、加载本地自定义图片 #

要在代码中使用本地图片，按以下步骤操作：

• 整理文件结构：在项目文件夹中创建images子目录，将本地图片放入其中，比如命名为purple.png、turquoise.png、brown.png。
• 设置路径变量：修改代码中的路径和扩展名变量：

  var IMAGE_SOURCE = "./images/"; // 本地图片目录的相对路径
  var IMAGE_EXTENSION = ".png"; // 对应图片的扩展名
  

• 注意运行方式：本地运行时不能直接双击打开HTML文件（浏览器安全限制会阻止加载本地资源），建议用VS Code的Live Server插件启动本地服务器，通过http://localhost:xxxx访问页面。

二、修复在线图片链接无法加载的问题 #

你的代码当前存在逻辑错误：在线图片的完整URL后被错误拼接了string_determine和空扩展名，导致URL无效。提供两种调整方案：

方案1：直接使用完整图片URL #

如果使用完整的在线图片链接，直接在img标签中使用该URL，无需额外拼接：

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

  switch (combo.options[combo.selectedIndex].text) {
    case '"red" + "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      imageUrl = "https://www.clipartmax.com/png/small/178-1782199_teardrop-dark-purple-clip-art-purple-raindrop-clipart.png";
      break;
    case '"blue" + "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      imageUrl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5hBnmIKpz6s7CMswHyFSogMfvrFGuFI41hA&usqp=CAU";
      break;
    case '"green" + "red"':
      string_determine = "brown";
      div.style.color = "brown";
      imageUrl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKjT9rxtmqaih5btmho6cPqDrcW3RXxBmc1w&usqp=CAU";
      break;
      
    default:
      string_determine = "NONE";
  }

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

方案2：前缀+文件名+扩展名模式 #

如果在线图片存放在同一服务器目录下，比如https://example.com/images/，图片命名为purple.png这类格式，可恢复拼接逻辑并正确设置变量：

var IMAGE_SOURCE = "https://example.com/images/";
var 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";
      break;
    case '"blue" + "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      break;
    case '"green" + "red"':
      string_determine = "brown";
      div.style.color = "brown";
      break;
      
    default:
      string_determine = "NONE";
  }

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

修改后的完整代码 #

JavaScript #

// 本地图片配置示例（替换为你的实际路径）
// var IMAGE_SOURCE = "./images/";
// var IMAGE_EXTENSION = ".png";

// 在线图片直接使用完整URL的配置
function tests() {
  let combo = document.getElementById("string_determine");
  let div = document.getElementById("mybox");
  let string_determine;
  let imageUrl = "";

  switch (combo.options[combo.selectedIndex].text) {
    case '"red" + "blue"':
      string_determine = "purple";
      div.style.color = "purple";
      imageUrl = "https://www.clipartmax.com/png/small/178-1782199_teardrop-dark-purple-clip-art-purple-raindrop-clipart.png";
      break;
    case '"blue" + "green"':
      string_determine = "turquoise";
      div.style.color = "turquoise";
      imageUrl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5hBnmIKpz6s7CMswHyFSogMfvrFGuFI41hA&usqp=CAU";
      break;
    case '"green" + "red"':
      string_determine = "brown";
      div.style.color = "brown";
      imageUrl = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKjT9rxtmqaih5btmho6cPqDrcW3RXxBmc1w&usqp=CAU";
      break;
      
    default:
      string_determine = "NONE";
  }

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

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="app.js" async defer></script>

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