Viewport Images are adding a trailing quote

Hi,

Yes, the page HTML is correct. It does contain escaped HTML, but only inside a JavaScript string in an inline script block. WooCommerce core outputs it in woocommerce_variable_add_to_cart() (includes/wc-template-functions.php), using wp_add_inline_script() + wp_json_encode(). This is the clean output on website with VPI off:

<script id="wc-add-to-cart-variation-js-before">
(window.wc_variation_gallery_defaults = window.wc_variation_gallery_defaults || {})[3193] = "<div class=\"woocommerce-product-gallery\" ...><img width=\"600\" height=\"600\" src=\"https:\/\/example.org\/wp-content\/uploads\/...-600x600.png\" ... decoding=\"async\" ...>...";
</script>

This is valid JS and appears on every variable product page on any WooCommerce site with a recent version.

With VPI on, LiteSpeed treats the img tag inside that JS string as a real tag. Media::_parse_img_for_preload() runs this on the full page, script contents included:

preg_match_all('#]+)/?>#isU', $content, $matches, PREG_SET_ORDER);

Same product on “identical” website with VPI on. The tag inside the JS string becomes:

<img width="\&quot;600\&quot;" height="\&quot;600\&quot;" src="\/\/example.org\/wp-content\/uploads\/...-600x600.png\&quot;" ... decoding="sync" srcset="\&quot;https:\/\/..." 600w,="" https:\="" \="" ...>

and this is added to the page head:

<link rel="preload" fetchpriority="high" as="image" href="//example.org/wp-content/uploads/...-600x600.png&quot;">

So it’s more than just the trailing quotation mark as you can see, but it’s the first thing that started polluting my access logs after I enabled the feature.

Hello,

report ID from site where I disabled VPI : BFUAAAOQ

As soon as I disabled it, everything went to normal, no broken image urls in past 24 hours

Hello,

I’ll be checking access logs for a while, but source code looks clean now. Will post update in 2-3 days.

Thanks!