在本文中，我们将学习如何使用 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" 按钮时，图片将显示在页面上作为预览。
