If image 'src' is '(unknown)' replace with 'missing.png'

Question

My CMS produces an img src="(unknown)" if an image isn't provided in the database. I would like to use javascript when this occurs to change it to img src="/images/missing.png" As a complete JS noob I have tried several hacks but none seem to work... any ideas? (there is likely to be more than one image on the page if that makes any difference)

Answer 1

This should work for you, if you use onError event for handling missing image src

<img src="main_img.png" onError="this.onerror=null;this.src='/images/missing.png';" />

Answer 2

I used this to solve a similar problem I had (using javascript)...

const images = document.querySelectorAll("img");

images.forEach((image) => {
  let imgsrc = image.getAttribute("src");
  if (imgsrc === "") {
    image.src = "/images/missing.png";
  }
});

Answer 3

if you're using php then this problem is going happen for sure you can use esc_url($url)

esc_url function solves the problem

Answer 4

If you're dynamically injecting the src when the page loads, you can always check and swap with placeholder if needed.

if (imgSrc === "unknown") {
    imgSrc = "placeholder.png";
}