代码自动移除失效图片的 <img> 标签

2025-04-01 19:23:26 10
  • 收藏
  • 管理

    方案一:服务器端过滤(推荐)


    在输出文章内容前,用代码自动移除
    失效图片的 
    img
     标签。以 
    PHP
     为例(其他语言逻辑类似):
                
    // 在输出文章内容的位置添加以下代码
    $content = preg_replace_callback(
        '/<img[^>]+>/i', // 匹配所有img标签
        function ($matches) {
            $imgTag = $matches[0];
            // 提取src属性(支持单引号、双引号或无引号)
            preg_match('/src=(["\'])?([^\s>]+)\\1/i', $imgTag, $srcMatches);
            $imageUrl = $srcMatches[2] ?? '';
            
            // 检查是否为失效域名(替换成你的失效域名列表)
            $invalidDomains = ['example.com', 'old-site.net'];
            $parsedUrl = parse_url($imageUrl);
            
            if (isset($parsedUrl['host']) && in_array($parsedUrl['host'], $invalidDomains)) {
                return ''; // 直接移除失效图片的img标签
            }
            return $imgTag; // 保留有效图片
        },
        $content
    );
    echo $content;。


    02

    方案二:客户端JavaScript处理

    用 JavaScript 检测图片加载失败,自动替换为占位图或隐藏:        
    <!-- 在页面头部或模板中添加以下脚本 -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('img').forEach(img => {
            // 监听图片加载错误事件
            img.onerror = function() {
                // 替换为占位图(可选)
                // img.src = '/path/to/placeholder.jpg';
                // 或直接隐藏
                img.style.display = 'none';
                // 可选:移除img标签或替换为其他内容
                // img.remove();
            };
        });
    });
    </script>


    03

    方案三:CSS 隐藏失效图片(辅助方案)

    通过 CSS 隐藏加载失败的图片(需配合 JavaScript)   
    /* 在CSS中添加 */
    img:not([src]):not([srcset]) {
        display: none; /* 隐藏无src属性的图片 */
    }
    
    /* 或通过JavaScript动态添加类名 */
    <style>
    .broken-image {
        display: none;
        /* 或替换为占位图背景 */
        /* background: url('/placeholder.jpg'); */
    }
    </style>
    
    <script>
    // 在JavaScript中动态标记失效图片
    document.querySelectorAll('img').forEach(img => {
        img.onerror = function() {
            img.classList.add('broken-image');
        };
    });
    </script>



    上一页:没有了 下一页:野蛮人设计:是给你的吗?
    全部评论(0)