How to handle loading of images that may not exist?
There’s quite a possibility that a few of the images on your website may cease to exist and your visitors would end up seeing a broken image icon instead of the original image or an image not found error.
Here’s An Example.
Typically, there’s no exact reason for why you’re getting this ‘Image not found’ error but usually, the answer is that it occurs when an error is triggered during the loading of an external file (image).
Related: How to Quickly Fix Error 1020: Access Denied
Whatever the case is, this is not something you want your users to see while surfing your website or application.
Luckily, there are some fixes that you can leverage to troubleshoot this ‘Image not found’ error and we’re going to discuss them in this brief read.
Let’s begin.
Related: 6 Easy Solutions To Fix 405 Method Not Allowed Error on Your WordPress Site
How To Fix The Image Not Found Error
1. Periodic Data Cleanup
The Image not found error often occurs when the image URL is incorrect or if it directs to an image that no longer exists on your website or application. This issue is most likely to come from your website database. Now, this is a lengthy process as you need to check out the image URLs for relevancy.
A great way of doing this is by picking up the list of image URLs that you have added to your website in recent times and checking if you’re able to retrieve them. If not, then you need to delete those URLs from your database.
If you’re able to retrieve data from each image URL, then you need to move on to the next technique.
2. Replace The Broken Image With A New One
Another great way of getting rid of the Image not found error is to replace the affected image directly with the newer one.
For this, you need to check out the error event in HTML when it is triggered. Look out for the one error attribute of the <img> tag. Here’s an example.
<img src="http://example.com/non-existent-image.jpg" onerror="this.onerror=null;this.src='http://example.com/existent-image.jpg';" />
If the original image fails to load, then it is replaced by the image mentioned in the onerror attribute handler.
The best part about using this method is that you can easily resolve this issue in real-time without having to mess with the periodic data.
3. Resolve The Image Not Found Error From Image Server
The image server knows if the image doesn’t exist. Therefore, it sends an error status code ‘404 Image Not Found’ to the client. Instead, the server itself could replace it with a default image, correct the HTTP status code and then send it to the browser or the application.
The only drawback here is that this method could be conducted only by expert professionals as it requires you to build a server that can handle this rerouting for you.
4. Use A Third-Party Image Server
Using a third-party image server can also do the job for you. This is because these integrations can handle the server-side non-existent image automatically for you. A great example is the ImageKit.io in which you can specify where the default image would be delivered if the original image does not exist, with the original image URL itself.
Here’s an example.
<!-- The non-existent image URL --> <img src="https://ik.imagekit.io/demo/img/non_existent_image.jpg" /> <!-- Specifying the default image to be displayed in the URL --> <img src="https://ik.imagekit.io/demo/img/tr:di-medium_cafe_B1iTdD0C.jpg/non_existent_image.jpg" />
By following these techniques, you can quickly get rid of the Image not found error and keep your users from seeing a broken image icon.