动态 img url - Javascript

符合W3C标准的HTML文档中，元素被用来在页面中嵌入图像，常见的使用方法为使用静态的图片URL。但是，在一些特殊情况下，如需要动态更改图片URL地址，使用Javascript可以轻松实现。

实现方式

使用Javascript可以获取元素，并动态更改其中的src属性值，从而实现动态的图片URL。

以下是示例代码：

<!-- HTML -->
<img id="myImage" src="http://example.com/static-image.png">

// Javascript
document.getElementById("myImage").src = "http://example.com/dynamic-image.png";

可以看到，首先通过getElementById方法获取到ID为"myImage"的元素，然后通过修改src属性值来更改图片URL。

动态生成图片URL

在实际工作中，我们可能需要动态生成图片URL，这时可以使用模板字符串（template literals）来拼接URL。

以下是示例代码：

const baseUrl = "http://example.com/";
const imageName = "my-image";
const ext = ".png";

const imageUrl = `${baseUrl}${imageName}${ext}`;

document.getElementById("myImage").src = imageUrl;

通过使用模板字符串，我们可以方便地将多个字符串拼接成一个完整的URL。

使用Ajax请求

另一种常见的情况是，我们需要通过Ajax请求获取图片URL，然后在页面上展示。

以下是示例代码：

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/image-url", true);

xhr.onload = function() {
  if (this.status === 200) {
    document.getElementById("myImage").src = xhr.responseText;
  }
};

xhr.send();

在该示例代码中，我们使用XMLHttpRequest对象发起GET请求，获取图片URL，然后将其赋值给图片的src属性。

总结

通过使用Javascript，我们可以轻松地实现动态图片URL的功能，从而满足各种需求。无论是静态的URL还是动态生成URL，都可以通过Javascript快速实现。