在本文中，我们将学习如何使用 JavaScript 实现一个简单的图片预览功能。我们将使用 HTML、CSS 和 JavaScript 来创建一个用户界面，用户可以输入图片 URL 并实时预览图片。
创建 HTML 页面结构
首先，我们需要创建一个包含用于输入图片 URL 和显示图片预览的 HTML 页面。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Preview</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>Image Preview</h1><input type="text" id="image-url" placeholder="Enter image URL" /><button id="preview-btn">Preview Image</button><br /><img id="image-preview" src="" alt="Image Preview" style="display: none;" /><script src="scripts.js"></script>
</body>
</html>添加 CSS 样式
接下来，我们为页面添加一些基本的样式。创建一个名为 styles.css 的文件，并添加以下内容：
body {font-family: Arial, sans-serif;text-align: center;
}img {max-width: 100%;
}button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;
}编写 JavaScript 代码
现在我们已经准备好编写 JavaScript 代码来实现图片预览功能。首先创建一个名为 scripts.js 的文件，然后添加以下代码：
document.getElementById('preview-btn').addEventListener('click', function () {const imageUrl = document.getElementById('image-url').value;if (imageUrl) {const imagePreview = document.getElementById('image-preview');imagePreview.style.display = 'block';imagePreview.src = imageUrl;} else {alert('Please enter a valid image URL.');}
});现在，当用户在输入框中输入图片 URL 并点击 "Preview Image" 按钮时，图片将显示在页面上作为预览。
