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?

Image transcriptions

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>

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

17 <div class="container"> 18 <!
Get unstuck

318,921 students got unstuck by Course
Hero in the last week

step by step solutions

Our Expert Tutors provide step by step solutions to help you excel in your courses