0

I am trying to display either or (<img> or <h1>) if an image is retrieved from a static URL.

So if this fails to load an image.

{%for team in object_list|slice:":1"%}
<img src="{% static "/img/Teams/" %}{{team.teamname}}.png" class="mx-auto mb-1" alt="{{team.teamname}}">
{%endfor%}

I would like to display a <h1> and have none of the code above loaded.

{%for team in object_list|slice:":1"%}
<h1>{{team.teamname}}</h1>
{%endfor%}

Im really unsure about the best way to go about resolving this condition. Is it possible to use a

{% if {% static "/img/Teams/" %}{{team.teamname}}.png" %} 

or some type of javascript?

Thank you for any input.

1
  • Did you add the {% load static %} line on top of the page?
    – Bryan
    Commented Sep 8, 2020 at 18:45

1 Answer 1

0

So for anyone looking for a possible solution for this problem. This is what i ended up using. A little Jquery to do the job

<script>  
    $("img").on("error", function() {
      var h = document.createElement("H1");
      var t = document.createTextNode(this.alt);
      h.appendChild(t);
      this.replaceWith(h); 
    });
</script> 

Not the answer you're looking for? Browse other questions tagged or ask your own question.