基于JavaScript實現圖片預覽功能

更新時間：2024年07月19日 09:16:41 作者：劉志輝

在本文中,我們將學習如何使用 JavaScript 實現一個簡單的圖片預覽功能,我們將使用 HTML、CSS 和 JavaScript 來創(chuàng)建一個用戶界面,用戶可以輸入圖片 URL 并實時預覽圖片,感興趣的小伙伴跟著小編一起來看看吧

前言

在本文中，我們將學習如何使用 JavaScript 實現一個簡單的圖片預覽功能。我們將使用 HTML、CSS 和 JavaScript 來創(chuàng)建一個用戶界面，用戶可以輸入圖片 URL 并實時預覽圖片。

創(chuàng)建 HTML 頁面結構

首先，我們需要創(chuàng)建一個包含用于輸入圖片 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" rel="external nofollow" >
</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 樣式

接下來，我們?yōu)轫撁嫣砑右恍┗镜臉邮?。?chuàng)建一個名為 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 代碼來實現圖片預覽功能。首先創(chuàng)建一個名為 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" 按鈕時，圖片將顯示在頁面上作為預覽。

到此這篇關于基于JavaScript實現圖片預覽功能的文章就介紹到這了,更多相關JavaScript圖片預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: