image doesn't load when using template inheritance

Question

The image in the parent template doesn't load in the child one, instead it shows the 'alt'. Here's how the structure goes.

"base.html"

<DOCTYPE! html>
<html>
    <head>
    </head>
    <body>
        <div class = "x">
            <image src="x.jpg" alt="x">
        </div>
        <div class = "y">
            <a src="...">y</a>
        </div>
        <div id = "content">
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

"child.html"

{% extends "base.html" %}
    {% block content %}
        ---replaced content
    {% endblock %}

content, y show in child normally, but x (the image) shows the alt text and can't load the image. This only happens when the image's src isn't a url, if it's it shows fine.

I'm using jinja2 template engine.

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

The problem was solved when I added the image to the directory containing all the static files other than just any directory and adding this directory path to the src. This happened because I configured the app.yaml handler like this

handlers:
- url: /static
  static_dir: static

so whenever a url starts with '/static' it gets it from this directory and treats it as static file otherwise not.

This is very similar to this question Jinja not rendering css/images in sub-directories and has nothing to do with jinja2 or its inheritance.

edited May 23 '17 at 12:11

Community

1
1

answered Sep 23 '13 at 23:11

Shimaa

477
1
6
16

Bottom line, use absolute URLs when accessing images (and other resources). – Dave W. Smith Sep 24 '13 at 03:50
Do you mean in the configuration file? if yes, what's absolute vs relative URL in it (not in general) ? – Shimaa Sep 25 '13 at 05:13
I meant in the HTML. `src="x.jpg"` and `src="/x.jpg"` mean different things depending on the request. In most cases, you want to use the latter. – Dave W. Smith Sep 25 '13 at 21:41

image doesn't load when using template inheritance

1 Answers1