0

I pull in image links from several sources so I have a mix images that render and then have problems rendering.

I have many images that return with http error 400, 403 etc.

Am I able to detect this in the django template so that I can render something more suitable than a broken image?

Something like:

{% if ia.image.url %}
                      <img src="{{media_url}}{{ia.image.url}}" alt="#" class="trimimg1" />
                    {% else %}
                    <img src="{% static 'common/app/images/news-default.jpg' %}" alt="#" class="trimimg1"  />
                    {% endif %}
Atma
  • 29,141
  • 56
  • 198
  • 299
  • 1
    Maybe this question will solve your problem ! [Here's link](https://stackoverflow.com/questions/18364547/django-custom-filter-to-check-if-file-exists) – Aniket Pawar Jun 16 '17 at 17:10

1 Answers1

1

You are able to detect broken links in the django template or also before in the view. However, depending on the type of project you are doing, I would not recommend this - at least not without caching.

Let's talk about the theory first and then about a possible alternative solution: If you only are using images that you are hosting yourself, serving the images to your clients should be no problem as long as the files on your server exist. You can easily check that by retrieving the path of the image and checking if the file exists (provided, that you may access the file and did not separate completely the media server, then you have to handle this as if it is external hosting). If I read your question carefully, you seem to link to images hosted on external servers though. It is possible to handle a few but probably not all problems with those images on the server side. Either you do this while storing the image URL already, or you do a periodical check in the background. If you really want to check every time you are sending the image URL to the user, you might create a heavy load on the server just for checking. In this case, I recommend to rely heavily on caching and to cache the return value of the method for checking the availability of the URL for a certain time.

That being said, you could do the following in your template:

In theory, you could create your own custom filter "urlexists" (See https://docs.djangoproject.com/en/1.11/howto/custom-template-tags/ ). This filter would retrieve the URL you want to check. It would try to retrieve the file from the remote server (Download just the headers, see https://stackoverflow.com/a/16778473/1331407 on how to do that) and return True, if the URL exists and False otherwise.

Usage:

{% if ia.image.url|urlexists %}
<img src="{{media_url}}{{ia.image.url}}" alt="#" class="trimimg1" />
{% else %}
<img src="{% static 'common/app/images/news-default.jpg' %}" alt="#" class="trimimg1"  />
{% endif %}

As I said, it is a solution but I do not recommend this.

Alternative solution

I would rather recommend to handle the HTTP error on the client side using JavaScript. That script can be as easy as an and a JavaScript function that then replaces the image src with a placeholder image that you provide. Examples on how to do that are provided here: Detecting an image 404 in javascript

You could even do one better: If you want to know about the inaccessible image, you could modify the URL of the placeholder image to a view that retrieves the image URL and logs it somewhere in your database so that you can remove the URL from your image database later. The view would always just return the placeholder image.

Why do I recommend handling this error on the client side?

Simple answer: Server load and access rights. Checking all URLs constantly will create a huge server load and traffic, both of which you might not want to handle all the time. In addition, your server might not be allowed to access certain images that you would filter out - or vice versa. Some servers allow you only to access their images after you loaded a page containing those images beforehand (I learned that trying to scrape movie posters from websites for my personal BluRay library index). An image that your server might have scraped from somewhere and that you are able to access might thus not be accessible for your clients webbrowser. Thus he might still see broken images. If you check the availability on your clients browser, he will never see the broken image, since his or her browser is always replacing those with a placeholder. If you include my suggestion above, you would even crowdsource image availability checking, reducing server load on your and foreign servers.

ingofreyer
  • 1,086
  • 15
  • 27