Img src url 带变量

Question

我想使用 javascript 和 html 在页面加载时加载图像。这是我的原始代码，它在 Windows10 上的 IE11 和 Firefox 中完美运行，但在 Windows7 上的 IE11 中运行不佳。是它不喜欢的syntax/quotes吗？

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" ;/>

Answer 1

在这里工作正常。您是否有您正在使用的网站的 link？也许 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;
});

<img id="IMG1" src="" width="100" height="70" name="mymap" align="middle" alt="Map" ;/>

Answer 2

你试过基本方法吗...

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

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

Answer 3

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

Img src url 带变量

Img src url with variables

html

javascript

variables

image

src