I am making a small website for my side project using flask and python. I've inserted some images, which when I open the html file, I can see those image stored in the same directory as the html file. However, when I am trying to run my script, the image is not showing.
This is the python scipt:
@app.route('/', methods=('GET', 'POST'))
def contact():
global final_filename
global real_post_response
form = UploadForm()
if form.validate_on_submit():
name = form["name"].data
email_address = form["email"].data
up_file = form.chat_file.data
filename = secure_filename(up_file.filename)
filename=filename.replace(".txt", "")
now_time=datetime.now()
filename=filename+"_"+now_time.strftime('%m_%d_%H_%M_%S')
filename=filename+".txt"
up_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
add_erp_user_info(email_address,filename,name)
send_simple_email(name, email_address, filename)
final_filename=filename
print ("final_filename (in upload file) is ", final_filename)
real_post_response=True
print ("changing real post response to true")
return redirect(url_for('uploaded_file'))
return render_template('contact.html', form=form)
This is the contact.html script:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project Bluetick: Relationship SMS-Analysis</title>
<link rel="stylesheet" type= "text/css" href= "{{url_for('static', filename='styles/contact.css') }}">
</head>
<h1>Project Bluetick: Are you texting your partner too much?</h1>
<h2> Let's use objective data to find out! </h2>
<h2> See the medium article <a href=https://medium.com/@luyilousia/improving-my-dating-life-one-text-analysis-at-a-time-a802cb8c2876>here</a> </h2>
<h2> Or if you prefer to <a href= https://breakinguppodcast.podbean.com/e/episode-31-project-bluetick-analysing-relationships-through-whatsapp-data/> listen </a> </h2>
<div class="formwrapper">
<h2 class="title">Upload your whatsapp chat history:</h2>
<form method="POST" enctype="multipart/form-data" >
{{ form.hidden_tag() }}
{% if form.name.errors %}
{% for error in form.name.errors %}
<div class="flash">{{ error }}</div>
{% endfor %}
{% endif %}
{% if form.email.errors %}
{% for error in form.email.errors %}
<div class="flash">{{ error }}</div>
{% endfor %}
{% endif %}
{% if form.chat_file.errors %}
{% for error in form.chat_file.errors %}
<div class="flash">{{ error }}</div>
{% endfor %}
{% endif %}
<div class="form-field">{{ form.name.label }} {{ form.name }} </div>
<br>
<div class="form-field">{{ form.email.label }} {{ form.email }} </div>
<br>
<div class = "form-field">{{ form.chat_file.label}} {{ form.chat_file }} </div>
<br>
{{ form.submit }}
</form>
</div>
<br>
<h2 class="title">How does it work ?</h2>
<h2><img src="////Users/louisalu/Documents/text/internal_sms_analysis/part1.png" alt="Explanations" width="700" height="200"></h2>
<h2 class="title">What does it analyze?</h2>
<h3>Ultimate Quality Indicator: a summary score to test the health of your text conversation</h3>
<h3><img src="final_score.png" alt="Final Score" width="700" height="500"></h2>
<h3>Text Ratio: How is texting more ? </h3>
<h3><img src="message_ratio.png" alt="Message Ratio" width="700" height="500"></h2>
<h3>Initiation Score: Who initiates more ? </h3>
<h3><img src="initiation.png" alt="Initiation Ratio" width="700" height="500"></h2>
<h3>Sentiment: Are you having a good time talking to your partner ? </h3>
<h3><img src="sentiment.png" alt="Sentiment Score" width="700" height="500"></h2>
<h3>Holy Grail: How many holy grail conversations are you having ? </h3>
<h4>*Holy Grail conversations are high quality text conversations</h4>
<h3><img src="holygrail.png" alt="Holy Grail Conversation" width="700" height="500"></h2>
<h3> And so much more indicators all in the reports </h3>
<h2 class="title"> Questions? Please email: [email protected] </h2?
</html>
The error occured in the image, I tried to specify the entire path of the image but still it is not showing.
This is the css stylesheet, which is saved under a different folder:
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
* {
background-color: #E7717D;
font-family: Helvetica, Arial, sans-serif;
color: white;
text-align: center;
}
form { max-width:420px; margin:50px auto; }
.title{
color:white;
font-family: Helvetica, Arial, sans-serif;
font-weight:600;
font-size: 20px;
border-radius: 5px;
line-height: 22px;
background-color: #4F81BD;
border:2px solid #4F81BD; */
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.form-field {
color:#D4FCA4;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #D4FCA4;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
}
input {
background-color: #E7717D;
border:2px solid #D4FCA4
}
/* .form-field:focus { border:2px solid #CC4949; } */
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 100%;
background:#C2B9B0;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#4F81BD }
/* Message flashing */
.flash {
background-color: #C3073F;
padding: 10px;
width: 102%;
}
