I'm trying to use this template: http://www.free-css.com/free-css-templates/page185/flat-style#shout
and this is my file directory:
app
- static
[--] css (inside static)
[--] images (inside static)
[--] js (inside static)
- templates
but the images won't load properly still:
http://i.imgur.com/Mh71ko9.png
Does anyone know why the images won't properly load?
You have simply dumped the HTML from the website in to your templates folder and all the href and src attributes for images and CSS are still using relative links. These need to be converted to use Flask's static files functionality.
For example, to get the CSS working, change this line:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
to this:
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel='stylesheet' type='text/css' />
And similarly for images, you can change:
<img src="images/logo.png" title="Flat style" />
to
<img src="{{ url_for('static', filename='images/logo.png') }}" title="Flat style" />
You'll need to do this for all static files referenced in the HTML.
Note that your Flask app will need to have imported url_for
from flask import Flask, render_template, url_for
Related
Hey I am trying to input custom css into my flask application. I was able to load bootstrap fine but when it comes to my local css I am having touble.
Here is how I am loading my css:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link ref="stylesheet" href="{{ url_for('static',filename='styles/main_design.css') }}">
Maybe this is because your browser is not refreshing static files you can easily fix this by hot refreshing (ctrl+refresh or ctrl+F5)
I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404
I tried typing in the path in my browser and it works fine
This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");
I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!
In your html file you should have this in the header:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}">
... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).
Also here is a random example of how I serve images from the static directory:
h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>
Been through every question asked here on same topic, but couldn't get my issue resolved. I have a project (modified version of this) directory setted up this way;
I have two links to go to from home page
Admin Dashboard
Dashboard
The admin dashboard page is prefixed by /admin/dashboard whereas the other is /dashboard. I am creating home blueprint (inside home.init.py) by providing the relative path of root static directory;
home = Blueprint('home', __name__, static_url_path='/app/static', static_folder="static")
both the home page and the dashboard page can find the static directory (and load properly), but the admin/dashboard CANNOT fetch static/ resources from admin/static/: GET http://127.0.0.1:5000/admin/static/vendors/bootstrap/dist/js/bootstrap.min.js. the strange thing is, I later added the entire static folder inside admin directory but still it cannot find the above bootstrap.min.js link. Here is my app/init.py file where I am registering the blueprints with app
from .admin import admin as admin_blueprint
app.register_blueprint(admin_blueprint, url_prefix='/admin')
from .home import home as home_blueprint
app.register_blueprint(home_blueprint)
and home/views.py
#home.route('/dashboard')
#login_required
def dashboard():
"""
Render the dashboard template on the /dashboard route
"""
return render_template('home/dashboard.html', title="Dashboard")
#home.route('/admin/dashboard')
#login_required
def admin_dashboard():
prevent non-admins from accessing the page
if not current_user.is_admin:
abort(403)
return render_template('home/admin_dashboard.html', title="Admin Dashboard")
the base.html is listed with some static resources to load.
<link href="{{ url_for('static', filename='vendors/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendors/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendors/themify-icons/css/themify-icons.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendors/flag-icon-css/css/flag-icon.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendors/selectFX/css/cs-skin-elastic.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet">
According to the docs, providing the static_url_path to prefixed pages should work, do anyone have a clue on what happening wrong here. Any help would be appreciated. Thanks
I´m new in python and django.
My code is below and the problem is that the images do not appear.
I include in the teste.html this tag but it didn´t work src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png"
My path is:
BCcartorio
bccartorio
settings
urls
iddigital
views
urls
templates
iddigital
teste.html
assets
css
images
js
My iddigital.views.py:
from django.shortcuts import render, HttpResponse
def home(request):
return (render(request, "iddigital/teste.html"))
My teste.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome</h1>
<button class="btn btn-danger" type="button" name="button">login</button>
<div class="bd-vertical-align-wrapper">
<img class="bd-imagelink-1 bd-own-margins bd-imagestyles " src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png">
</div>
</body>
</html>
It is not a good practice to hard-code the URL of an image as this can cause many unexpected problems(e.g. paths mixup). In order to avoid this Django provides a hassle-free way to manage and serve your static files easily.
First you have to include the django.contrib.staticfiles app in your INSTALLED_APPS and then define in your settings file the STATIC_URL which will serve as the base path that'll be used by Django to find your static files in a template. It is a good practice to have a separate static folder that will contain the assets folder which -in turn- will contain your css, js, images etc sub-folders.
So I'd take the assets folder from that path and put move it in a static folder that would be in the same level as the iddigital and templates ones. In that case your STATIC_URL variable would be equal to '/static/.
Now in the teste.html template you can load your static folder by adding {% load static %} at the top of your file. Your images can now be called as simple as this: <img src="{% static "assets/images/logocartorio.png" %}" class="bd-imagelink-1 bd-own-margins bd-imagestyles"/>
More info on the above can be found at the excellent Djangodocumentation.
Problem
I have the css files in /static/ and the html files in /templates/.
When I use simple routing, its works well.
#app.route('/newuser', methods=['GET'])
def newuserform():
return render_template("newuser.html")
But in this code, Flask doesn't render correctly the .CSS files, why?
#app.route('/new/user', methods=['GET'])
def newuserform():
return render_template("newuser.html")
Loading .css files in html,
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
Set the link as
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
Or better use static urls generator for Jinja2
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/bootstrap.min.css') }}">