您现在的位置：程式碼之家 >> 編程語言 > >> 網頁程式設計 >> PHP 程式設計 >> PHP 綜合知識

PHP 獲取文章首圖並支援預設圖片隨機/固定回退

編輯：PHP 綜合知識

需求背景

在 CMS、部落格、電商商品列表等場景中，常需顯示文章/商品的「第一張圖片」作為縮圖。當內容無圖片時，需提供預設佔位圖。本文提供兩種實作：隨機預設圖與固定預設圖，並說明正則優化要點。

核心實作：提取第一張 <img> 的 src

<?php
/**
 * 從 HTML 內容提取第一張圖片 URL
 * @param string $content 文章內容
 * @param string $defaultDir 預設圖目錄
 * @param bool $random 是否隨機選取預設圖
 * @return string 圖片 URL
 */
function get_first_image($content, $defaultDir = 'images/random/', $random = true) {
    // 改良正則：支援單雙引號、屬性順序不固定、跨行
    $pattern = '/<img[^>]+src=[\'"]([^\'"]+\.(?:gif|jpg|jpeg|png|webp))[\'"][^>]*>/i';
    
    if (preg_match($pattern, $content, $matches)) {
        return $matches[1]; // 找到第一張圖
    }
    
    // 無圖片時的回退邏輯
    if ($random) {
        $num = mt_rand(1, 4); // 1~4.jpg
        return $defaultDir . $num . '.jpg';
    } else {
        return './images/no-image.jpg'; // 固定預設圖
    }
}

// 使用範例
$articleContent = $article->Content; // 假設來自資料庫
$thumb = get_first_image($articleContent);
echo '<img src="' . $thumb . '" alt="文章縮圖">';
?>

正則表達式解析

/<img[^>]+src=[\'"]([^\'"]+\.(?:gif|jpg|jpeg|png|webp))[\'"][^>]*>/i

<img：匹配標籤開頭（不區分大小寫）
[^>]+：匹配任意非 > 字元（涵蓋 class、id、data-* 等屬性）
src=[\'"]：匹配 src 屬性，支援單引號或雙引號
([^\'"]+\.(?:gif|jpg|jpeg|png|webp))：捕獲群組，取得副檔名為圖片格式的 URL
[\'"][^>]*>：匹配結尾引號至標籤結束
i 修飾符：大小寫不敏感（匹配 <IMG>、<Img>）

改進點：原文正則使用 .*? 貪婪匹配易導致跨標籤錯誤；改用 [^>]+ 限制在單一標籤內，並明確列出允許副檔名，支援 WebP 等現代格式。

進階優化建議

1. 效能考量：避免重複運算

若列表頁需顯示多篇文章縮圖，建議在儲存/更新文章時預先解析並存入欄位 first_image，讀取時直接使用，避免每次請求都跑正則。

2. 處理相對路徑與 CDN

function normalize_image_url($url, $cdnDomain = '') {
    if (strpos($url, 'http') === 0) return $url; // 已是絕對路徑
    if ($cdnDomain && strpos($url, '/') === 0) return $cdnDomain . $url;
    return $url; // 相對路徑保持原樣
}

3. 支援 data-src (Lazy Load)

現代前端常用 data-src 延遲載入，可擴展正則：

$pattern = '/<img[^>]+(?:src|data-src)=[\'"]([^\'"]+\.(?:gif|jpg|jpeg|png|webp))[\'"][^>]*>/i';

4. 安全性：過濾惡意腳本

若內容來自用戶輸入（如富文本編輯器），建議搭配 HTMLPurifier 淨化後再解析，防止 XSS。

完整可直接部署的 Helper 版本

建立 application/helpers/image_helper.php (CI) 或通用函數檔：

<?php
if (!function_exists('get_article_thumb')) {
    function get_article_thumb($html, $options = []) {
        $defaults = [
            'default_dir' => 'assets/images/placeholder/',
            'random' => true,
            'count' => 4,
            'extensions' => ['gif','jpg','jpeg','png','webp'],
            'attr' => ['src', 'data-src', 'data-original'],
        ];
        $opt = array_merge($defaults, $options);
        
        $ext = implode('|', $opt['extensions']);
        $attr = implode('|', $opt['attr']);
        $pattern = "/<img[^>]+(?:{$attr})=[\'\"]([^\'\">]+\.(?:{$ext}))[\'\">]/i";
        
        if (preg_match($pattern, $html, $m)) return $m[1];
        
        if ($opt['random']) {
            return $opt['default_dir'] . mt_rand(1, $opt['count']) . '.jpg';
        }
        return $opt['default_dir'] . 'default.jpg';
    }
}