带有变量的 Img src url答案

【问题标题】：Img src url with variables带有变量的 Img src url
【发布时间】：2018-07-01 16:00:03
【问题描述】：

我想通过使用 javascript 和 html 的页面加载来加载图像。这是我的原始代码，它在 Windows 10 上的 IE11 和 Firefox 中完美运行，但在 Windows7 上的 IE11 中却没有。是它不喜欢的语法/引号吗？

var1 = "someURl";
var2 = "someEndingToURl";
var mainImgsrc = var1 + 'some_text' + var2;

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('IMG1').src= mainImgsrc

<img id="IMG1" src="" width="1000px" height="700px" name="mymap" align="middle" alt="Map" ;/>

【问题讨论】：

标签： javascript html image variables src

【解决方案1】：

基本的方法你试过了吗……

<body onload="IMG1.src= mainImgsrc;">

包括 Trident 在内的所有流行引擎都支持 onload 事件。

【讨论】：

这很完美。我想多了。谢谢！
@Jotter & @user4723924，这是一种不好的做法。看我的回答。您应该将所有 JS 包装在 load 或 DOMContentLoaded 侦听器中。

【解决方案2】：

在尝试更改图像 SRC 之前，请确保您的 DOM 已完全加载。您是否尝试过 console.log() 您的 document.getElementById ？顺便说一句，您的代码没有正确编写，您错过了 });在您的 SRC 分配之后。

【讨论】：

【解决方案3】：

在这里工作正常。您是否有指向您正在使用的网站的链接？也许var1 和var2 前面缺少var 意味着您无意中覆盖了全局变量？您可以通过添加 var 并将它们移动到您的 DOMContentLoaded 侦听器中来解决此问题（以避免它们成为隐式全局变量）：

document.addEventListener('DOMContentLoaded', function() {
  var var1 = "https://makelin.us/";
  var var2 = "/70";
  var mainImgsrc = var1 + '100' + var2;

  document.getElementById('IMG1').src = mainImgsrc;
});

&lt;img id="IMG1" src="" width="100" height="70" name="mymap" align="middle" alt="Map" ;/&gt;

【讨论】：