CSS, JS, fonts, images and other assets are not being loaded into my django app index.html. All the assets for the app are present inside the application app in my django project under "templates/assets".
I have tried the other answer which I was getting as suggestion to this question but even that solution did not work for me.
[04/May/2022 05:48:50] "GET /assets/js/glightbox.min.js HTTP/1.1" 404 2311
Not Found: /assets/js/count-up.min.js
[04/May/2022 05:48:50] "GET /assets/js/count-up.min.js HTTP/1.1" 404 2308
Not Found: /assets/js/main.js
[04/May/2022 05:48:50] "GET /assets/js/main.js HTTP/1.1" 404 2284
Here is my dir tree structure :
Project Name : myproject
App name that serves index.html : app
├── app
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── templates
│ │ ├── 404.html
│ │ ├── assets
│ │ │ ├── css
│ │ │ │ ├── LineIcons.2.0.css
│ │ │ │ ├── animate.css
│ │ │ │ ├── bootstrap.min.css
│ │ │ │ ├── glightbox.min.css
│ │ │ │ ├── main.css
│ │ │ │ └── tiny-slider.css
│ │ │ ├── fonts
│ │ │ │ ├── LineIcons.eot
│ │ │ │ ├── LineIcons.svg
│ │ │ │ ├── LineIcons.ttf
│ │ │ │ ├── LineIcons.woff
│ │ │ │ └── LineIcons.woff2
│ │ │ ├── images
│ │ │ │ ├── favicon.svg
│ │ │ │ ├── hero
│ │ │ │ │ └── phone.png
│ │ │ │ └── logo
│ │ │ │ ├── logo.svg
│ │ │ │ └── white-logo.svg
│ │ │ ├── js
│ │ │ │ ├── bootstrap.min.js
│ │ │ │ ├── count-up.min.js
│ │ │ │ ├── glightbox.min.js
│ │ │ │ ├── main.js
│ │ │ │ ├── tiny-slider.js
│ │ │ │ └── wow.min.js
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
└── myproject
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, '/templates/assets')
STATIC_URL = 'static/'
How do I resolve this?
index.html
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.svg" />
<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.2.0.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tiny-slider.css" />
<link rel="stylesheet" href="assets/css/glightbox.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />
EDIT : As asked in comments, on changing the static path I get
[04/May/2022 06:33:36] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/animate.css HTTP/1.1" 404 1911
[04/May/2022 06:33:36] "GET /static/css/LineIcons.2.0.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/tiny-slider.css HTTP/1.1" 404 1923
[04/May/2022 06:33:36] "GET /static/css/main.css HTTP/1.1" 404 1902
[04/May/2022 06:33:36] "GET /static/css/glightbox.min.css HTTP/1.1" 404 1929
{% load static %}
<link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/images/favicon.svg' %}" />
<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/LineIcons.2.0.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/tiny-slider.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/glightbox.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
If you want to use static files, Write "{% load static %}" and {% static 'path' %}
setting.py
STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]
Add this code into settings.py file in the below. and After adding try to refresh the paga by using crt+shift+r shortcut. It hasppens to same problem i added the above code and refresh the page with shoutcut boom. It will worked for me
Related
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?
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/:
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...
I am learning Django for one of my web projects.
Facing difficulties to append css,jquery file in my project.
The template is very simple and need not to use extends.Just one page form.
What I have done to declare my media file that:
In settings.py file:
Added path:
`import os
def path(*x):
return os.path.join(os.path.abspath(os.path.dirname(__file__)), *x)
`
Then added:
MEDIA_ROOT = path('media') #media is my folder where all the css,js file are
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/media/'
TEMPLATE_DIRS = (
path('templates')
In the urls.py file added:
from django.conf import settings
urlpatterns = patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', { 'document_root' : settings.MEDIA_ROOT }),
In the template file I have tried with all these types of declaration:
<script type="text/javascript" src="/media/jquery.min.js"></script>
<script type="text/javascript" src="/media/site.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/media/screen.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" />
But when I loaded the template file as simple html with :
<script type="text/javascript" src="../media/jquery.min.js"></script>
<script type="text/javascript" src="../media/site.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../media/screen.css" />
That worked.But I need to integrate within my Django project.
Hope will get the navigation and solve it :)
Thanks
The correct syntax is in the list of things you tried unsuccessfully:
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />
If you define your MEDIA_URL as "/media/", then that link will work out to be /media/test.css.
Provided that you have the following directory structure:
my_project
|-- settings.py
|-- urls.py
|-- media
|-- test.css
I would double check all your file and directory names, make sure you don't have any errant/extra slashes, etc.
Also, I presume that "test.css" was supposed to be "screen.css" like it was in all your other examples...
But basically, using an absolute url path (starting with the slash to indicate it resolves from the site root) will work just the same as using a relative path (../) as long as you actually have your files in the right place.
Then what you have will work.
My dir structure is as follows:
|-- test_form
|-- /settings.py
|-- /urls.py
|-- /media
| '-- test.css
'-- /templates
'-- ...
And I added the following syntax in my template.html file:
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}test.css" />
I am confused where the problem is.
I think in the urls.py, you might have missed the url in the urlpatterns, i.e.:
urlpatterns = patterns('',url(r'^media/(?P.*)$', 'django.views.static.serve', { 'document_root' : settings.MEDIA_ROOT }),