I have an SPA with Django on backend. I try to make it a progressive web app. I made a manifest.json and linked it in my index.html:
<link rel="manifest" href="/static/manifest.json">
Chrome can't detect it. My index.html is a Django template and is stored in templates directory and can't be accessed but by Django route /. Manifest.json is in static directory and served to front-end as a regular static file. I think this is the reason manifest can't be detected - index.html not being accessible. Am I right? If so, could you give me an advice as to how to make it work please?
Try
load static
{% static "manifest.json" %}
The syntax here is {% static "path/relative/to/static/folder" %}
Related
I have a legacy project with a bunch of html files and static files (css, images, js, videos ...). All links in those html files are relative and hardcoded:
"css/main.css" or "img/my_img.jpg" etc.
I need to run that project using django.
I cannot change all those links to kind of
{% load static %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
but all recipes I found in internet suggest using exactly that method.
How can I:
1) route hardcoded urls like "css/main.css"
2) route hardcoded urls like "another.html" ?
This can be done with much ease like this<!--lets' say image-->
<img src="{% static 'static/images/image1.png' %}">.Please make sure the file directories match with that in the code.
Please visit https://docs.djangoproject.com/en/1.10/howto/static-files for detailed info
I am have been having troubles figuring out how to serve static images with my django application. However, I have figured out a sort of "hack" to get it working but it doesn't allow for much flexibility.
In the html files I have tried the following...
<img src="{{ STATIC_URL }}textchange/nextarrow.png" class="foobar" id="foobar">
Above: The pages will load when I use this but the images will not work.
<img src="{% static "textchange/nextarrow.png" %}" class="foobar" id="foobar">
Above: The pages will not load, I get a server error
<img src="thefullurltoS3bucket/nextarrow.png" class="foobar" id="foobar">
Above: The images will load fine
I have been trying all these different formats when going to production with Heroku and S3. The question I have is is the way I'm serving my static images correct? I use the last example in which I make the src the full url to the bucket at s3. Is that fine?
It should be noted that when I use the static tag serving css files works fine. Images is the only problem.
Your first and second solutions ( that you got server error and not loading ) is the correct way of using static files which is:
<img src="{% static "textchange/nextarrow.png" %}" class="foobar" id="foobar">
review your settings.py file and set STATIC_URL and STATIC_DIRS and also STATIC_ROOT, if you got server error maybe you set the STATIC_URL or STATIC_DIRS wrong. you can find plenty of posts about these settings.
Also check your image url in browser ( sth like 127.0.0.1:8000/static/files/etc.jpg )see if you can access the image.
Serving static files in Django can be a pain.
First, make sure you use the static template tag correctly in your template:
{% load static from staticfiles %}
<img src="{% static 'path/to/image.jpg' %}">
In your settings, have your STATIC_URL point to something like '/static/', your STATIC_ROOT point to the directory where you'll actually serve your files post-collectstatic, and your STATIC_DIRS to where you'll place your static files within your project (i.e. 'static' directory).
If you're serving from S3, you'll probably follow a tutorial like this one.
So I followed this tutorial:
https://github.com/rancavil/django-openshift-quickstart/wiki/Tutorial-How-create-an-application-with-Django-1.6-on-Openshift
and I tried to add a static image to the default home.html page and it just won't find it.
HTML:
{% load static %}
<html>
<head>
</head>
<body>
<img src="{% static 'Logo_Trans.png' %}">
<div class="left"></div>
<div class="right">
<p>is coming soon</p>
</div>
</body>
</html>
All other files are as listed in the repo given.
I've found the problem. The static files were serving properly when deployed but not when in debug mode. To fix this just add the STATICFILES_DIR variable in settings.py
Find:
if ON_OPENSHIFT:
DEBUG = False
else:
DEBUG = True
Add:
if ON_OPENSHIFT:
DEBUG = False
else:
DEBUG = True
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),
'/var/www/static/',)
Openshift is a very good service but definitely needs to update their docs/examples for django. Their sample program still runs django 1.4. Hope this helps anyone else that runs into this problem.
you can read the answer for this question Django cannot find static files. Need a second pair of eyes, I'm going crazy. Hope it will help you to understand static files. Static files in Django are always a bit painful.
Btw, as I explain in the last comment, I recommend you to create an app called common within a static folder inside it to place static content that is not application specific. Static application specific files should be placed inside the static folder within your app. This way, you can forget about defining the STATICFILES_DIRS variable and it will always work in DEBUG mode.
After that, ofc, define STATIC_ROOT and when you want to work in deploy mode, do the collectstatic command and it will also work.
After dealing hundreds of times with issues like this, I've found this is the best approach.
I've written my first angular app for handling a rather complex multi-file upload process within a Django app. Everything is working great and I'm loving Angular. However, I stumbled on a simple problem referencing image sources. It's not critical for my app, but I wanted to add a simple spinner/whirligig image while the files are uploading.
In my non-Angular Django templates this is dead simple:
<img src='{% static 'whirligig.gif' %}'>
This doesn't work inside Angular views due to the Angular/Django template syntax conflict. Of course, I can hard-code my Django STATIC_URL path or use a relative path from the Angular partial, but I'd prefer not to. Am I missing something simple here or is this just an unfortunate product of mixing two MVC frameworks?
Have you tried verbatim tag?
I guess you can do something like:
{% verbatim %}{{ {% endberbatim %}{% static 'whirligig.gif' %}{% verbatim %} }}{% endverbatim %}
Ok very weird issue here.
In the base.html file for the admin site they have this:
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% static "admin/" %}{% endfilter %}";</script>
The important part is this {% static "admin/" %}. Its only used for a handful of things in javascript, one of them being the calendar icon url for the date widget.
Locally this works just fine, and the url ends up being /static/admin/. However on production, it ends up as http://myaws.s3.address/admin with no trailing slash.
I can't figure out for the life of me how this might happen. This is Django 1.4. My STATIC_URL for aws ends with a trailing slash. This has got to be in the staticfiles app somewhere right? I'm not sure how to track this one down.
GAH!
Found the problem. Its a bug in django storages (s3 specifically):
http://code.larlet.fr/django-storages/issue/121/s3boto-admin-prefix-issue-with-django-14