Wordpress some img src are replaced with `data:image/svg+xml...`

Question

I created a custom page template in one of my site's theme.

Some img src were rendered correctly, but some were replaced with something like data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E

to be exact, it looked like this in live site:

<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="https://example.com/wp-content/themes/MyTheme/img/icons/Info.png" class="cursor-pointer">

And its not rendering anything on live site.

What causes this? and what should I do to avoid this issue?

Answer 1

If you have the Autoptimize plugin, simply deactivate the Lazy Load Image feature, and everything should function correctly.

Answer 2

In my case, the cause of this issue in the WP Rocket LazyLoad plugin, in the file: image.php (two different folders).

Answer 3

If you are using the W3 Total Cache plugin, you have to disable Lazy Load images under the section User Experience in General Settings of W3 Total Cache Plugin in Wordpress.

Performance >> General Settings >> User Experience >> Lazy Load Images

W3 Total Cache

Just uncheck Lazy 'load images option'.

Answer 4

I've got into same problem in my woocommerce shop and it was fixed after disabling CDN-Enabler plugin.

The wiered thing about this problem is I did not set anything like data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="https://example.com/wp-content/themes/MyTheme/img/icons/Info.png" class="cursor-pointer in plugin settings and it was working fine and correct for a long time till a few days ago so it could have be security thread.

Answer 5

I have disabled W3 Total Cache plugin.