0

I would like to display the image mouse.jpg on the webiste. The website is displayed but the image is not.

I deployed using this guide on DigitalOcean. It uses apache, wsgi and virtualenv.

I found this on stackoverflow but could not transfer the answer to my problem. It is about writing files and not displaying.

I also found this and that but they do not include a web server like apache or nginx.

On AWS I setup the security group and allowed access on port 80 and 8080.

This is my tree in my home directory on the ec2:

nextstep
├── index.html
├── nextstep.py
├── nextstep.wsgi
├── static
│   └── mouse.jpg
└── templates
    ├── nextstep.html

nextstep.py looks like

from flask import Flask, render_template
import os

PEOPLE_FOLDER = os.path.join('static')

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = PEOPLE_FOLDER

@app.route('/')
def hello_world():
    full_filename = os.path.join(app.config['UPLOAD_FOLDER'], 'mouse.jpg')
    return render_template('nextstep.html',user_image = full_filename)

if __name__ == '__main__':
  app.run()

nextstep.wsgi looks like:

import sys
sys.path.insert(0, '/var/www/html/nextstep')

from nextstep import app as application

/etc/apache2/sites-available$ cat 000-default.conf looks like:

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    WSGIDaemonProcess flaskapp threads=5
    WSGIScriptAlias /test /var/www/html/flaskapp/flaskapp.wsgi

    <Directory flaskapp>
        WSGIProcessGroup flaskapp
        WSGIApplicationGroup %{GLOBAL}
        Order deny,allow
        Allow from all
    </Directory>

    WSGIDaemonProcess nextstep threads=5
    WSGIScriptAlias /nextstep /var/www/html/nextstep/nextstep.wsgi

    <Directory nextstep>
        WSGIProcessGroup nextstep
        WSGIApplicationGroup %{GLOBAL}
        Order deny,allow
        Allow from all
    </Directory>

On EC2 tree of /var/www/html is:

.
├── flaskapp -> /home/ubuntu/flaskapp
├── index.html
└── nextstep -> /home/ubuntu/nextstep

nextstep.html looks like:

<html>
<body>
Hello World from nextstep.html
{{ user_image }}
<a href="nextstep2">next step 2</a>
<img src="{{ user_image }}" alt="User Image">
<img src="/var/www/html/nextstep/static/mouse.jpg">
<img src="~/nextstep/static/mouse.jpg">
<img src="/home/nextstep/static/mouse.jpg">
<img src="home/nextstep/static/mouse.jpg">
<img src="static/mouse.jpg">
<img src="/static/mouse.jpg">
<img src="mouse.jpg">
<img src="/mouse.jpg">

</body>
</html>
Danny
  • 35
  • 7

1 Answers1

0

I found the solution here: Setting up static folder path in Flask

In nextstep.py it is:

app = Flask(__name__, static_url_path="", static_folder="static")

In nextstep.html it is:

<img src="mouse.jpg">
Danny
  • 35
  • 7