如何正确使用FILTER HOOK？替换图片源代码遇问题求助

Let's walk through how to swap out that default base64 placeholder in your Rocket Lazyload code, plus troubleshoot common issues you might be hitting.

First, let's break down the original snippet you're working with: it generates the lazy-loaded <img> tag with a placeholder, plus a noscript fallback for users with JavaScript disabled. The key variable here is $placeholder, which uses a filter to set the default tiny GIF.

Option 1: Use the Built-in Filter (Recommended) #

Instead of editing core plugin code (which will get overwritten when Rocket updates), use the existing rocket_lazyload_placeholder filter. This is the cleanest, update-safe approach.

Add this to your theme's functions.php file or a custom plugin:

add_filter( 'rocket_lazyload_placeholder', 'custom_rocket_lazy_placeholder' );
function custom_rocket_lazy_placeholder( $default_placeholder ) {
    // Swap this with your desired placeholder URL
    return 'https://your-site.com/images/custom-placeholder.png';
    
    // Or use a custom base64 image if you prefer:
    // return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
}

This will automatically override the default placeholder without touching the plugin's core files.

Option 2: Directly Modify the Code (Not Recommended) #

If you must edit the core snippet (note: changes here will be lost on plugin updates), adjust the $placeholder variable directly:

Original Code #

$placeholder = apply_filters( 'rocket_lazyload_placeholder', 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=' );
$html = sprintf( '<img%1$s src="%4$s" data-lazy-src=%2$s%3$s>', $matches[1], $matches[2], $matches[3], $placeholder );
$html_noscript = sprintf( '<noscript><img%1$s src=%2$s%3$s></noscript>', $matches[1], $matches[2], $matches[3] );

Modified Code #

Replace the default base64 string with your own image URL or base64 data:

// Option A: Use a remote image URL
$placeholder = apply_filters( 'rocket_lazyload_placeholder', 'https://your-site.com/images/custom-placeholder.png' );

// OR Option B: Use a custom base64 image
$placeholder = apply_filters( 'rocket_lazyload_placeholder', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=' );

// Keep the rest of the code unchanged
$html = sprintf( '<img%1$s src="%4$s" data-lazy-src=%2$s%3$s>', $matches[1], $matches[2], $matches[3], $placeholder );
$html_noscript = sprintf( '<noscript><img%1$s src=%2$s%3$s></noscript>', $matches[1], $matches[2], $matches[3] );

Common Fixes If Your Changes Aren't Working #

• Clear Cache: Rocket Cache (or any caching plugin) might be serving old cached content. Clear your site and browser cache after making changes.
• Filter Priority: If your custom filter isn't taking effect, bump its priority to ensure it runs after the default:

  add_filter( 'rocket_lazyload_placeholder', 'custom_rocket_lazy_placeholder', 99 );
  

• Valid URL/Base64: Double-check that your placeholder URL is accessible, or that your base64 string is correctly formatted (no typos).
• Noscript Fallback: The noscript tag uses the original image source intentionally—this is for users with JS disabled, so it won't show your placeholder. That's normal behavior!

内容的提问来源于stack exchange，提问作者Duc Phuli