cannot load image in flask on ubuntu

Question

I'm just new to Flask and I'm trying to do a project to learn it.I am trying to load a background image for my page and I've tried many ways.But it just gets 404 error . This is my signup.py file:

from flask import Flask , render_template
from database_home import Profile
from flask  import Blueprint
sign_up = Blueprint('sign_up' , __name__,template_folder="/home/ali/Desktop/flasklearn/ccs/templates",static_folder="/home/ali/Desktop/flasklearn/ccs/static/css")
@sign_up.route('/')
def Sign_up():
    return render_template('signup.html')

And here in my html file I tried to load the background image and I'm sure that the image exists:

<body style='background-image:url("../static/img/abstract-wallpaper-widescreen-az-hd-wallpaper-52-stock-64.jpg")'>

Also I've tried this :

<body style="background:url {{url_for('sign_up.static',filename='../img/abstract-wallpaper-widescreen-az-hd-wallpaper-52-stock-64.jpg')}}">

And also this:

<body background="{{url_for('sign_up.static',filename='../images/abstract-wallpaper-widescreen-az-hd-wallpaper-52-stock-64.jpg')}}">

And none of these did work.My project structure is like this:

project\
        templates\
        views\
        static\
                css\
                img\

And I think its good to say that I can load the css files with:

<link href="{{url_for('sign_up.static',filename='main3.css')}}" rel="stylesheet" type="text/css" />

How should I exactly do that?I couldn't find any thing for that. — ali73, Jul 13 '16 at 08:41
Check http://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask — Arun Ghosh, Jul 13 '16 at 14:13

score 0 · Answer 1 · answered Jul 08 '16 at 17:24

Here is a fix to your issue:

1 - In Blueprint definition, make static pointing to the static folder instead to css:

sign_up = Blueprint('sign_up' , __name__,
template_folder="/home/ali/Desktop/flasklearn/ccs/templates",
static_folder="/home/ali/Desktop/flasklearn/ccs/static")

2 - Then uring url_for get the reference to your image background:

<body style='background-image:url("{{url_for('sign_up.static',
filename='img/abstract-wallpaper-widescreen-az-hd-wallpaper-52-stock-64.jpg')}}");'>

3 - As for css files:

<link href="{{url_for('sign_up.static',filename='css/main3.css')}}"
rel="stylesheet" type="text/css" />

I've tried this too but 404 error on both css and image files — ali73, Jul 13 '16 at 08:37

cannot load image in flask on ubuntu

1 Answers1