Flask App: Load images from current working directory
<p><strong>tl;dr version: how do I get my Flask app to load images not in the project directory?</strong></p>

<p>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.</p>

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

<p>My <code>setup.py</code> has a <code>entry_points</code> keyword argument that is as follows:</p>

<pre><code>entry_points={
    'console_scripts': [
        'imgdisplay=imgdisplay.imgdisplay:start_server'
    ]
</code></pre>

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

<p>My <code>imgdisplay.py</code> code looks like the following:</p>

<pre><code>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()
</code></pre>

<p>My <code>img.html</code> template looks like the following:</p>

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

    {{ image }}

    {% if image %}
      &lt;img src="{{ image }}"&gt;&lt;/img&gt;
    {% endif %}

&lt;/body&gt;
</code></pre>

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

<p>On my Desktop, I have a folder called <code>images/</code>, 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?</p>