img-preview-script - 圖片預覽工具

一個純 Node.js 腳本，無需任何依賴，快速查看特定目錄及其子目錄的圖片，支持快速預覽查看。

功能介紹

img-preview-script 是一個純 Node.js 腳本，無需任何依賴，為開發者提供高效的圖片管理和代碼生成解決方案。

核心功能

🖼️ 圖片預覽與管理

• 快速預覽：一鍵掃描目錄下所有圖片，支持多層級文件夾遍歷
• 智能排序：支持按寬度、高度、路徑、體積等多種維度排序
• 實時搜索：文件名過濾，快速定位目標圖片
• 多背景模式：白色、灰色、棋盤格三種背景，適配不同圖片類型
• 圖片詳情：顯示尺寸、大小、路徑等完整信息，支持一鍵複製

⚡ 代碼自動生成（核心亮點）

這是本工具的核心價值功能，專為開發者設計：

• 智能代碼生成：自動將圖片資源轉換為可直接使用的代碼片段
• 多格式支持：支持 Import、Require、HTML img、Markdown、CSS url 等多種代碼格式
• 自定義模板：支持完全自定義代碼模板，使用變量佔位符靈活配置
• 一鍵複製：生成的代碼可直接複製到剪貼板，無縫集成到開發工作流

需求背景

項目中圖片眾多，文件夾層級多，不方便快速查閲。傳統的文件瀏覽器需要逐層打開文件夾，效率低下。本工具提供了一種更高效的圖片查看方式，支持一次性掃描目錄下所有圖片，並提供豐富的預覽和管理功能。

使用教程

腳本安裝及使用

安裝

方式一：全局安裝（推薦用於個人開發環境）

通過 npm 全局安裝：

npm install -g img-preview-script

安裝完成後，在任意目錄下運行：

img-preview

方式二：項目依賴安裝（推薦用於團隊協作）

在項目中作為開發依賴安裝：

npm install --save-dev img-preview-script
# 或使用 pnpm
pnpm add -D img-preview-script
# 或使用 yarn
yarn add -D img-preview-script

安裝完成後，在項目的 package.json 的 scripts 中手動添加 img-preview 命令：

{
  "scripts": {
    "img-preview": "img-preview"
  }
}

然後就可以通過以下方式使用：

npm run img-preview

支持的參數

使用示例

全局安裝方式：

img-preview -p 8080 -d ./images

項目依賴安裝方式（需要在 package.json 中手動配置）：

{
  "scripts": {
    "img-preview": "img-preview -p 8080 -d ./images"
  }
}

然後運行：

npm run img-preview

注意事項

• 服務器啓動後會自動打開瀏覽器訪問預覽頁面
• 如果未指定端口，將使用 20000-25000 之間的隨機端口
• 如果未指定目錄，將掃描執行腳本時的工作目錄及其子目錄
• 服務器會自動跳過 node_modules、dist 和以 . 開頭的目錄（如 .git）
• 支持 .jpg / .jpeg、.png、.gif、.bmp、.webp、.svg 等主流圖片格式。

功能詳解

排序功能

支持多種排序方式，方便快速查找和整理圖片：

• 寬度排序：按圖片寬度升序或降序排列
• 高度排序：按圖片高度升序或降序排列
• 路徑排序：按文件路徑字母順序排列
• 體積排序：按文件大小排序

文件名過濾功能

在搜索框中輸入關鍵詞，可以快速過濾出包含該關鍵詞的圖片文件，支持實時搜索。

圖片背景切換功能

支持三種背景模式，方便查看不同透明度的圖片：

• 白色背景：適合查看深色圖片
• 灰色背景：中性背景，通用性強
• 棋盤格背景：透明背景標識，方便查看帶透明度的 PNG 圖片

釘住功能

可以將重要的圖片釘在頂部，方便隨時查看。釘住的圖片會始終顯示在列表頂部，不受排序影響。

圖片預覽

點擊圖片可以進入大圖預覽模式，方便查看圖片細節。

新 tab 打開功能

支持在新標籤頁中打開圖片，方便使用瀏覽器原始能力查看圖片細節

打開所在文件夾

點擊每張圖片下方的“打開文件夾”按鈕，可以在本地資源管理器中快速定位該圖片所在的目錄，無需手動查找，大幅提升工作效率。此功能兼容 Windows、macOS 和 Linux 操作系統。

圖片詳情及其點擊複製功能

附帶詳細的圖片信息，點擊對於區域，可直接複製相關信息

• 文件名
• 文件路徑
• 圖片尺寸（寬度 × 高度）
• 文件大小

文件夾過濾功能

可以按文件夾進行過濾，只顯示指定文件夾下的圖片，方便管理大型項目的圖片資源。

代碼生成功能

這是本工具的核心功能，專為提升開發效率而設計。

功能價值

為什麼需要代碼生成功能？

在開發過程中，我們經常需要：

1. 批量導入圖片資源：手寫數十上百個 import 語句，耗時且容易出錯
2. 生成文檔代碼：編寫文檔時需要生成 Markdown 圖片語法
3. 組件庫開發：需要將圖片路徑轉換為組件 props 或配置
4. 多格式切換：同一個項目可能需要 Import、Require 等多種格式

傳統方式 vs 代碼生成：

實際應用場景：

• ✅ 前端項目開發：快速生成 import icon from './assets/icon.png' 語句
• ✅ React/Vue 組件庫：批量生成圖片組件的 props 配置
• ✅ 文檔編寫：自動生成 Markdown 圖片語法 ![alt](path/to/image.png)
• ✅ CSS 開發：生成背景圖片路徑 background-image: url('path/to/image.png')
• ✅ 靜態資源管理：生成資源清單 JSON 文件

預設模板

提供了 6 種常用的代碼模板，覆蓋主流開發場景：

1. Import 語句：import icon from './assets/icon.png'

   • 適用於：ES6+ 模塊化項目、React、Vue 等現代前端框架

2. Require 語句：const icon = require('./assets/icon.png')

   • 適用於：CommonJS 模塊、Node.js 項目

3. HTML img 標籤：<img src="./assets/icon.png" alt="icon" />

   • 適用於：靜態 HTML、模板文件

4. Markdown 圖片語法：![icon](./assets/icon.png)

   • 適用於：文檔編寫、README、博客文章

5. CSS url 引用：background-image: url('./assets/icon.png')

   • 適用於：CSS 樣式文件、SCSS/LESS

6. 僅路徑輸出：./assets/icon.png

   • 適用於：配置文件、JSON 數據、自定義格式

所有預設模板都支持編輯和自定義，修改後會自動保存到本地存儲。

生成函數自定義

對於特殊需求，支持完全自定義代碼模板，使用變量佔位符靈活配置：

支持的變量：

自定義模板示例：

// React 組件示例
const {name} = () => <img src="{path}" width={width} height={height} />

// Vue 組件示例
<template>
  <img :src="require('{path}')" :alt="{name}" />
</template>

// JSON 配置示例
{
  "name": "{name}",
  "url": "{path}",
  "size": "{width}x{height}",
  "fileSize": "{size} bytes"
}

// 帶註釋的代碼
// {fullname} - {width}x{height}
import {name} from '{path}';

點擊複製生成的代碼

生成的代碼支持一鍵複製到剪貼板，可以直接粘貼到代碼編輯器中，無需手動修改，大幅提升開發效率。

使用流程：

1. 選擇一張或多張圖片
2. 選擇代碼模板（預設模板或自定義模板）
3. 查看生成的代碼預覽
4. 點擊複製按鈕，代碼自動複製到剪貼板
5. 在代碼編輯器中粘貼即可使用

安全性

• 純前端工具：所有數據處理都在本地進行，不經過後端服務器，沒有安全性問題
• 代碼完全開源：代碼無混淆，完全可查閲，方便審查和二次開發
• 本地運行：所有數據都在本地，不會上傳到任何服務器

相關鏈接

• npm 地址：https://www.npmjs.com/package/img-preview-script
• Git 倉庫：https://github.com/Momo707577045/img-preview-script

持續迭代與社區支持

本項目會持續更新和優化，歡迎大家提出寶貴意見與建議。如果在使用過程中遇到任何問題、或有想法與需求，歡迎通過以下方式反饋交流：

• GitHub Issues：在 GitHub 倉庫 提交 issue
• GitHub Discussions：參與項目討論或建議：https://github.com/Momo707577045/img-preview-script/discussions
• PR：歡迎有能力的開發者提交 Pull Request，共同完善工具
• 也可在 npm 頁面 留言或點贊支持

您的每一個反饋都是本工具不斷進步的重要動力！

技術特點

• ✅ 零依賴，純 Node.js 實現
• ✅ 跨平台支持（Windows、macOS、Linux）
• ✅ 快速掃描，支持大目錄
• ✅ 響應式設計，適配不同屏幕
• ✅ 本地存儲，設置自動保存
• ✅ 開源免費，MIT 協議

許可證

MIT License