Search code examples
pythonhtmlimageloading-image

Images Don't Display After Making Layered Webpage

I am using python, html, jinja, java script ect. to build a webapp on a raspberry pi powered device. So far when I put images on my webpages everything works fine. However when I create a "layered" webpage that is using a variable to differentiate between user profile files, it breaks my local image references which wont load and instead display their tag. Using online images for the image source works perfectly fine however.

Not Working Code(Python):

@app.route('/adminPortal/<user_id>', methods=['GET', 'POST'])
def adminPortal(user_id):
    print('Admin Portal')
    ...

Working Code(Python):

@app.route('/adminPortal', methods=['GET', 'POST'])
def adminPortal():
    print('Admin Portal')

Unchanged HTML:

<img src="{{ 'static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px> <span style="display:inline-block; width: 50px;"></span>
<img src="{{'static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px> <br>
<img src="https://api.time.com/wp-content/uploads/2021/06/Pills.jpg" alt="Picture of Avatar" height=200px> <br>
<img src="{{'static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">

So far I have not been able to find any success how I reference the photos, and I don't know how to create the same webpage infrastructure in any other manner than the "layered" system I have set up.

Solution

  • The URL static/oldLady.jpg means "relative to the directory with the current page". If you are rendering /adminPortal, then it means /static/oldLady.jpg. If you are rendering /adminPortal/joe, then it means /adminPortal/static/oldLady.jpg.

    The solution is to use absolute URLs: /static/oldLady.jpg.