CODEWITHSUNDEEP
pythonhtmlcssflask
llu13701
llu13701

Reputation: 163

Image not showing in the HTTP web file through local host

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%;
}

Upvotes: 0

Views: 619

Answers (1)

AyyAppAn Ajith
AyyAppAn Ajith

Reputation: 116

In Flask, the image files are must be stored inside the static folder. Upload the images to static folder. Specifying the entire path will not work.

<img src="static/yourImageName.jpg" />

Upvotes: 1

Related Questions