Doesn’t suppress broken image icons in WpDataTables

It seems to be an issue with how your site is handling the broken images. If I try to load one of the image URLs directly, I’m getting redirected to your site’s 404 page, but it must not actually be returning a 404 error.

A few ways you could deal with this:

1. If your site is using wp_redirect() to send users to the 404 error page, you need to add 404 as the second parameter for the function. (The default value is 302.) It would look something like this: wp_redirect(home_url('/'), 404);

2. If your theme has a 404.php file, you could add status_header(404); into the top of that template file. (It has to be before get_header().)

3. If you don’t want missing image URLs to redirect to your 404 page, you could put RewriteEngine off into an .htaccess file inside your wp-content/uploads folder.

Hmm… disregard that, I guess. I inspected things more closely and it does look like I’m already getting a 404 status when I try to load one of those images. I’ll investigate a bit further and see what I can come up with.

Ah… I’m pretty sure know what the problem is. Your table is being loaded via AJAX. The plugin right now is coded so that it only works on HTML that was loaded into the DOM on the initial page load.

I can re-code it to work with dynamically-inserted (AJAX) content as well. Watch for an update coming shortly.

Excellent, thank you. That would explain why none of the five or six different suppression methods I’ve investigated have worked.

I’m filing a request with WPDataTables as well, to support dynamic alt tags in image cells (which would allow me to use the ‘alt=””‘ hack, as well as improving support for screen readers).

This is going to be a difficult one for me to test, because I don’t have a site that is loading content dynamically like this. If you’d be willing to make a small code edit and let me know if it fixes the issue for you, please do this:

In the file /wp-content/plugins/remove-broken-images/assets/script.js, right before the last line of code (});), insert these lines:

	// Images inserted into DOM by AJAX
	jQuery(document).ajaxComplete(function() {
		jQuery('img').on('error', function() {
			r34rbi(jQuery(this));
		});
	});

You may need to clear your cache in order to see the changes. Let me know if it works! (Or if you’d prefer not to make these code edits, and I’ll look for another way to test it.)

Excellent! I’ll give it a shot and report back.

Thank you.

Beautiful! That works.

Broken image icon still appears in the plugin’s table builder (which is fine, for debugging), but not in the published result.

Thank you very much.

Great to hear! It makes sense that the broken images would still be on the admin side, because my plugin’s code only runs on the front end. Probably good to have the broken images showing in admin though so you know they’re there!

I’ll go ahead and roll this out. I’ve been making a few other tweaks as well. Watch for version 1.3.0 to be available for update shortly.

Thanks for helping me test these changes!

Of course. Feel free to reach out if you need any other testing, our site is low traffic and I’m happy to help.

(I’d love to implement a fallback image, as shown at https://makandracards.com/makandra/31981-add-an-alternative-image-source-for-broken-images — I’ve asked WPDataTables to include that as a generated option, but it would be helpful site-wide.)

Thank you again. This is a great help.

I’m planning some big enhancements for version 2.0 which will include an admin screen where you can set some options like a default fallback image.

I’m also hoping to put together a tool that will scan all of your content and identify broken images for you, but that may be a massive undertaking, especially for sites with a large amount of content.