CODEWITHSUNDEEP
pythonhtmlflaskjinja2
ericmjl
ericmjl

Reputation: 14694

Flask App: Load images from current working directory

tl;dr version: how do I get my Flask app to load images not in the project directory?

I am building (as a fun project) a Flask app, designed as a command-line app, that loads a random image from my current working directory in the browser. Here is what the app structure looks like.

+-- imgdisplay/
    +-- imgdisplay/
        +-- imgdisplay.py
        +-- static/
            +-- styling.css
        +-- templates/
            +-- img.html
    +-- setup.py
    +-- LICENSE
    +-- README.md

My setup.py has a entry_points keyword argument that is as follows:

entry_points={
    'console_scripts': [
        'imgdisplay=imgdisplay.imgdisplay:start_server'
    ]

This lets me start the command-line app imgdisplay from anywhere. I have verified that this portion works with no problem.

My imgdisplay.py code looks like the following:

from flask import Flask, render_template
import webview
import click
from random import choice
import os
import os.path as osp
import logging

app = Flask(__name__)


# logging.setLevel(logging.DEBUG)

@app.route('/')
def hello(name=None):
    files = os.listdir(os.getcwd())
    image = choice([f for f in files if f[-4:] == '.jpg'])
    # tried the following line, but didn't work.
    # image = osp.join(os.getcwd(), image)
    # logging.info(image)
    return render_template('img.html', name=name, files=files, image=image)


@click.command()
@click.option('--port', default=5000, help='Port', prompt='Port')
@click.option('--host', default='localhost', help='Host', prompt='Host')
def start_server(port=5000, host='localhost'):
    app.run(host='localhost', port=port)


if __name__ == '__main__':
    start_server()

My img.html template looks like the following:

<!doctype html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"></link>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>Hello {{ name }}!</h1>
    {% else %}
      <h1>Hello, World!</h1>
    {% endif %}

    {{ image }}

    {% if image %}
      <img src="{{ image }}"></img>
    {% endif %}

</body>

All in all, it's a very simple Flask app. Something a noob like me would build.

On my Desktop, I have a folder called images/, in which I put a single image. I can display the file name string in my browser, but I cannot display the image; I expect to see the image loaded in the browser, but all I get is the icon showing that the image cannot be found. Pardon my noobness here, but what's the crucial concept I'm missing here?

Upvotes: 3

Views: 4594

Answers (1)

Liqang Liu
Liqang Liu

Reputation: 1883

I can display the file name string in my browser

It 's not a browser's network feature, it's a browser local file system feature, however, when you put the path such as /home/yetship/images/test.jpg in the html like this:

<html>
    <body>
       <img src="/home/yetship/images"></img>
    </body>
</html>

it's sure it will be not work, because if you visit you website in url: http://localhost:8080, the img tag will not find image in your pc with path /home/yetship/images instead, it will find images in http://localhost:8080/home/yetship/images,so, if you want make it display, you should following this guide to make your image directory a static directory and you should make img tag as:

<img src="image/test.jpg"></img>

instead of 

<img src="/home/yetship/image/test.jpg"></img>

and flask will find the image in your image directory and display on you browser.

I hope this can help you.

Upvotes: 1

Related Questions