Hello I'm learning flask and I want to insert an image. But the image is not correctly displayed: there is just an icon in the navigator.
I've tried to change the image extension from .png to .jpg but it doesn't change anything. I also tried to change navigator but it stills the same.
The python code:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/<page_name>/')
def render_static(page_name):
return render_template(f'{page_name}.html')
if __name__ == "__main__":
app.run()
The html code:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<img src="{{url_for('static', filename = 'image/Android_robot.png')}}" alt = "example" />
</body>
</html>
The image should be in static folder. Here is an example of how to use static image in Flask template.
Folder structure:
├── app.py
├── static
│ └── image
│ └── bitcoin.jpg
└── templates
└── image_example.html
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/demo/<page_name>/')
def render_static(page_name):
return render_template('{page_name}.html'.format(page_name=page_name))
if __name__ == "__main__":
app.run(debug=True)
Template image_example.html:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h2>Bitcoin image should be displayed underneath</h2>
<img height="500px" src="{{url_for('static', filename='image/bitcoin.jpg')}}" alt = "example" />
</body>
</html>
Output of the route http://127.0.0.1:5000/demo/image_example/:
Related
i'm new into django. I created a project named marketbook, it has a main templates directory and an app called users. Inside my app (users) i have templates folder as well with a file called login.html (templates/users/login.html.
I want to link this login.html in my app to a link in my file (navbar.html) in my main templates director folder. what should be the url tag to use?
Log In
In the settings.py file, the TEMPLATES variable is set to the field: 'DIRS': ['templates']. This is so that you can find the main home.html template, which is located in the templates folder, which is located in the folder where the application folder is, the manage.py module.
start the server: python manage.py runserve
go to: http://localhost:8000/users/home/
press the button and go to: http://localhost:8000/users/navbar/
urls.py (urls application)
from django.urls import path
from .views import home, navbar
urlpatterns = [
path('home/', home),
path('navbar/', navbar, name='navbar'),
]
views
from django.shortcuts import render
def home(request):
return render(request, "home.html")
def navbar(request):
return render(request, "users/navbar.html")
home.html
Log In
navbar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>This is a navbar template</h2>
</body>
</html>
I have flask app with next structure:
templates/
dashboard.html
static/
css/
styles.css
js/
main.js
Dockerfile
app.py
In app.py I just have one endpoint to serve main page.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/home")
def dashboard():
return render_template('dashboard.html')
if __name__ == '__main__':
app.run(debug=True)
dashboard.html:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>...</body>
<script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>
</html>
The app is hosted on AWS ECR+Fargate ( I am not the person who did devops side).
The app works, but static files (js and css) are not loaded, error 404. What could I miss?
I am using Django 3.0.8 My view function is as follows:
from django.shortcuts import render import datetime
# Create your views here.
def date_time_view(request):
date=datetime.datetime.now()
h=int(date.strftime('%H'))
if h<12:
msg='Hello Guest!!! Very good Morning!!!'
elif h<16:
msg='Hello Guest!!! Very good Afternoon !!!'
elif h<21:
msg='Hello Guest!!! Very good Evening!!!'
else:
msg='HELLO GUEST!! very good Night!!!'
my_dict = {'date':date,'msg':msg}
return render(request, 'testapp/results.html', my_dict)
and my template is as follows:
<!DOCTYPE html> {%load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<h1>{{msg}}</h1>
<h2>{{date}}</h2>
<img src="{%static " images/images.jpg" %}">
</body>
</html>
Check your configuration in your project settings file.
Templates can reside in each app separately, but also in a templates folder in APPS_DIR (folder with all Django apps).
Here is official docs for Django 3 templates:
https://docs.djangoproject.com/en/3.0/topics/templates/
Check your template's location. It should be yourproject/yourapp/templates/testapp.
how to serve Angular2 app using Django builtin webserver?
I think I'm having some problems with the template and static paths from django.
My django project structure looks like following:
DjangoDir/
manage.py
project/
settings.py
urls.py
app1/
app2/
static/
app2/
something.js
something.css
templates/
app2/
index.html
urls.py
views.py
I have an angular2 app with following index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular2</title>
<base href="/">
<link href="something.css" rel="stylesheet"/>
</head>
<body>
<app-root></app-root><script type="text/javascript" src="something.js"></script>
</body>
</html>
I get HTTP Status 404 (Not Found) code for the something.js and something.css file. Any ideas?
Here is my views.py in app2.
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'app2/index.html')
UPDATE
Working solution, but still looking for alternatives.
Adding to all internal links in the angular2 app:
"/static/app2/"
<!--e.g.:-->
<script type="text/javascript" src="/static/app2/something.js"></script>
or
<!--{% load static %}-->
<script type="text/javascript" src="{% static 'app2/something.js' %}"></script>"
How to avoid changing every link in template and static files just to make angular2 app work with django?
I think that the better way to deal with Django and Angular 2+ is to build an API. You may create an RESTful API with Django REST Framework or Tastypie. Then your Angular2 app would consume that API to create the user-facing experience. You can check django-rest-angular2-example.
However, you want to manage static files, you can read Managing static files
I am trying to overide the default Django admin styles.
I created a new app 'theme', placed it before Django Admin in INSTALLED_APPS and it works. Then I copied over base_site from the Django GitHub repo under Admin. I then added a custom style sheet which I am unable to link to.
Here is what my 'theme' app looks like:
├── __init__.py
├── static
│ └── admin
│ └── css
│ └── ross.css
└── templates
└── admin
└── base_site.html
I cannot link to my stylesheet without getting a 404.
{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/ross.css" %}" />
{% endblock %}
What am I doing wrong?
Had to restart the Django dev server, then it worked...