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>
