View the step-by-step solution to:

Question

I am trying to load images into a bootstrap carousel and the problem I am having is that the img src tag doesn't

seem to be finding my pictures and I am stumped as to why this is happening. In my project, I use flask to render an html file inside a folder called templates.


This is the html inside my templates.

Screen Shot 2019-10-01 at 22.23.06.png


This is my demo.py file which contains the code to start flask

The actual command I am using is  env FLASK_APP=demo.py flask run

Screen Shot 2019-10-01 at 22.23.25.png


This is what it looks like in my project directory


Screen Shot 2019-10-01 at 22.23.56.png


And the error I get when I go to port 5000 is


127.0.0.1 - - [01/Oct/2019 22:18:25] "GET /img/vacation2.jpg HTTP/1.1" 404 -


What am I doing wrong?

Screen Shot 2019-10-01 at 22.23.06.png

17
<div class="container">
18
<!--This div makes use of the jumbotron provided by bootstrap to pitch Bacon Ipsum ->
19
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
20
<ol class="carousel-indicators">
21
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
22
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
23
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
24
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
25
</01>
26
<div class="carousel-inner">
27
<div class="carousel-item active">
28
<img class="d-block w-100" src=". ./ img/vacation1. jpg" alt="First slide"/>
29
</div>
30
<div class="carousel-item">
31
32
</div>
<img class="d-block w-100" src=". ./img/vacation2. jpg" alt="Second slide"/>
33
<div class="carousel-item">
34
35
<img class="d-block w-100" src=" . ./img/vacation3. jpg" alt="Third slide"/>
</div>
36
<div class="carousel-item">
37
<img class="d-block w-100" src=" . ./img/vacation4. jpg" alt="Fourth slide"/>
38
</div>
B9
</div>
40
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="
prev">
41
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
42
<span class="sr-only">Previous</span>
43
</a>
44
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="
next">
45
<span class="carousel-control-next-icon" aria-hidden="true"></span>
46
<span class="sr-only">Next</span>
47
</a>
48
</div>

Screen Shot 2019-10-01 at 22.23.25.png

9
import datetime
10
from flask import Flask, render_template
11
12
APP = Flask(_name_)
13
DATETIME = str (datetime . datetime. now( ) )
14
15
@APP . route ( ' /' )
16
def home ( ) :
17
"this will point to the html template and pass in the datetime"""
18
return render_template ( ' demoPage. html' , value=DATETIME)
19
20
if
_name
1I
main_
21
APP . run (host='0.0.0.0', port=8080, debug=True)
22

Screen Shot 2019-10-01 at 22.23.56.png

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question
Ask Expert Tutors You can ask 0 bonus questions You can ask 0 questions (0 expire soon) You can ask 0 questions (will expire )
Answers in as fast as 15 minutes