How to Fix Missing or Broken Images in WordPress?

Nothing exists forever — including those images that you inserted in your blog posts from various external sources or even the internal resources.

Fix Missing/Broken Images in WordPress

Those who have been blogging for a long time now know the pain of such broken image links. Due to corrupt files, incorrect links, expired domains, deleted resources or whatever — your WordPress site can occasionally yield 404-errors on images — leading to negative SEO and a poor reading experience.

One simple solution that exists — is to replace those image links with proper ones — one by one — which is a big headache.

But there exists a simple Javascript snippet that you can add to your site’s header and replace all broken images with a default one – in a jiffy.

The Javascript Method

Let’s assume that the image that you want to use as a replacement of broken images is located at /wp-content/uploads/2018/08/replace.png, you can add this Javascript to your WordPress blog’s header:

$('img').error(function(){
$(this).attr('src', '/wp-content/uploads/2018/08/replace.png');
});

If you don’t know how to do so, you can use a plugin like Header and Footer Scripts or WP Code or Code Snippets to insert your custom javascript arguments.

The PHP way

Alternatively, you can just place this PHP code snippet in your theme’s functions.php file, anywhere between <?php and ?> :

function imgReplace() { ?>
<script>
  $('img').error(function(){
$(this).attr('src', '/wp-content/uploads/2018/08/replace.png');
});
</script>
<?php }
add_action( 'wp_head', 'imgReplace' );

This is a totally safe practice and won’t do any harm if your site has no broken images at all.

The Plugin Way

If you don’t want to do this manually, there is a plugin that can help you do the same and more.

Plcehodor (https://wordpress.org/plugins/placehodor/) can substitute / replace missing images by a default image.