HTML 點擊查看圖片代碼 在網頁中展示圖片是一種常見的做法。但是，有時候我們需要點擊一個按鈕或鏈接才能查看圖片。這種做法可以保護圖片版權，以及避免在網頁中加載多張大圖造成頁面卡頓問題。那么，如何在 HTML 中實現點擊查看圖片呢？下面是一個簡單的代碼示例。 首先，我們需要準備一張圖片。假設這張圖片的文件名為 image.jpg，放在項目根目錄下的 images 文件夾中。我們可以使用以下代碼來引用這張圖片：

<img src="images/image.jpg" alt="圖片">

接下來，我們需要添加一個按鈕或鏈接，當用戶點擊時，才會顯示圖片。這個按鈕可以是一個普通的按鈕，也可以是一個鏈接。下面是使用按鈕的代碼示例：

<button onclick="showImage()">查看圖片</button>

這個按鈕會觸發一個名為 showImage 的 JavaScript 函數。這個函數需要完成以下兩個任務： 1. 創建一個新的 img 元素，用來展示圖片； 2. 將這個元素添加到頁面中，讓用戶能夠看到圖片。 下面是 showImage 函數的代碼示例：

function showImage() {
var img = document.createElement('img');
img.src = 'images/image.jpg';
img.alt = '圖片';
document.body.appendChild(img);
}

這個函數首先使用 createElement 方法創建了一個新的 img 元素。然后，通過修改這個元素的 src 屬性和 alt 屬性，把需要展示的圖片的 URL 和說明文本都設置好了。最后，通過調用 appendChild 方法，把這個元素添加到了頁面中。 到這里，我們的點擊查看圖片功能就完成了。用戶只需要點擊按鈕，就可以看到圖片了。 需要注意的是，這個示例代碼只是最基本的實現方法。如果需要進一步完善這個功能，可以考慮添加以下功能： 1. 在圖片上增加放大縮小、旋轉等操作； 2. 在圖片展示時添加遮罩層，使得圖片更加美觀和突出； 3. 在圖片上方顯示圖片名稱、大小、格式等信息； 4. 實現圖片預加載，以提升用戶體驗等。