CODEWITHSUNDEEP
pythonhtmlflask
Martinxv
Martinxv

Reputation: 21

Trying to display local images on flask app website

I am trying to run a website through flask for an assignment. Flask works and the templates work the issue is that local files don't appear when I put them into the the block content on the code of the html pages. I've also tried placing the images in the template html code and that did not work. To put simply I want to change the background as well as display other images on html pages that are being run through flask but they do not show up.

As of right now I tried including images in the head of the html template(Didn't work). Also tried putting it in the body(Didn't work). Both times I used the examples on w3 schools and made sure the pathing was accurate. I tried when the image was located in the same folder, static folder or on the desktop and that didn't work. The only thing that did seem to work was using a url for the image which wouldn't help if I present this when the internet is down.

//////flask code//////
from flask import Flask, render_template, url_for
app = Flask(__name__)


@app.route("/")
@app.route("/home")
def home():
    return render_template('home.html')


@app.route("/new")
def about():
    return render_template('new.html')

@app.route("/exp")
def about():
    return render_template('exp.html')

if __name__ == '__main__':
    app.run(debug=True)

/////html example code(no they are not in the same file)/////
<html>
<head>

</head>
<body>
<style type="text/css">

// Unrelated Styling for Demo Purposes
@import url('https://fonts.googleapis.com/css?family=Lato');

html {
  &, &:after, &:before {
    box-sizing: border-box;
  }
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 16px;
}

body {
  background-image: url("test1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Lato', sans-serif;
}
</style>

All I am trying to do is make the local files in my folders pop up when run through flask. If I click on the html file they show up but when run through flask they do not show up. Please help.

Upvotes: 2

Views: 3015

Answers (2)

Fisal Assubaieye
Fisal Assubaieye

Reputation: 346

Copy your image/css/js etc... to static folder then change image url to ../../static/test1.jpg

for e.g. <img src="../../static/test1.jpg">

Upvotes: 0

glhr
glhr

Reputation: 4537

Make sure the static folder is at the root of the application, and put the image inside.

Then, change the image URL to:

url('/static/test1.jpg')

You can also let Flask generate the static URL for you by replacing /static/test1.jpg with

{{ url_for('static', filename='test1.jpg') }}

This removes the need to manually change URLs if you ever change the location of the static folder.

Upvotes: 1

Related Questions