HTML 和 JavaScript 图片接口示例

以下是一个简单的图片接口示例，使用 HTML 和 JavaScript 编写：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>图片接口</title>
</head>
<body>
	<h1>图片接口</h1>
	<p>
		<button onclick='getRandomImage()'>随机图片</button>
	</p>
	<div id='image-container'>
		<!-- 图片将显示在这里 -->
	</div>

	<script src='image-api.js'></script>
</body>
</html>

JavaScript 代码（保存为 image-api.js 文件）：

function getRandomImage() {
	// 创建一个新的 Image 对象
	var img = new Image();

	// 设置图片的 src 属性为接口地址
	img.src = 'https://picsum.photos/400/300/?random';

	// 将图片添加到页面上
	document.getElementById('image-container').appendChild(img);
}

当用户单击“随机图片”按钮时，getRandomImage() 函数将创建一个新的 Image 对象，并将其 src 属性设置为图片接口地址。然后，该图片将被添加到页面上的 image-container 元素中。

注意，这个简单的例子只是演示了如何使用 HTML 和 JavaScript 创建一个基本的图片接口。在实际应用中，您可能需要更复杂的代码来处理不同的图片请求和数据传输。