I added the following lines in my settings.py file:
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR,"static"),
]
STATIC_ROOT = os.path.join(BASE_DIR,"static")
Then I edited my HTML file to use {% load static %} and <img src="{% static 'static/myapp/images/ABC.png' %}" alt="">, but still I am not able to see the ABC.png pic on my webpage. Can someone please help?
Screenshots of .py files:
The issus is that you are incorrectly requesting the asset, use {% static 'myapp/images/ABC.png' %} instead. I suppose that you have the following structure in your app:
myapp
static
myapp
images
ABC.png
templetes
views.py
...
As you can see, is not necessary to add the name of your statics directory. The path is relative to the static folder of any of your apps in your project.
Related
I have the same html for Tools.html and home.html but I realized the logo can be loaded in this URL:
path('',views.home),
But in this URL I do not see the logo and also the favicon:
path('Tools/', views.Tools ),
http://127.0.0.1:8000/
http://127.0.0.1:8000/Tools/
views:
def Tools(request):
p=product.objects.filter(category__name='Tools')
return render(request,'Tools.html',{'p':p})
def home(request):
p=product.objects.filter(category__name='home')
return render(request,'home.html',{'p':p})
urls:
urlpatterns = [
path('Tools/', views.Tools ),
path('',views.home),
]
the following codes are for favicon and logo in html file:
<link rel="icon" type="image/x-icon" href="static/logo.png">
<img class="img" width="270px" src="static/logo.svg">
Why is this happening?
You should not hardcode static/logo.png, the right way is to use {% static 'logo.png' %}. Then it will always search in your static folder. You just need to start the template with {% load static %}. Assuming, that you have set in settings something like:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
and you keep such files in your_project/static folder it should work for every level on every app.
More info in Django DOCS
I am new to Django and still struggling to grasp static files and media files.
IF i want have images that are stored in models with mode.FilePathField on my website that are static then how should i call them properly in my templates:
using static tag Like that:{% static project.image.path %}
or that just by calling it: {{ project.image.path }}
When reading tutorial i got answers that the first one but then it doesn't work. It gives me wrong paths
i will get 'static/MyApp/static/Myapp/img.jpg' instead of MyApp/static/Myapp/img.jpg
I would be really glad for an example of static files called dinamacally.
According with django doc here
Web App generally need to serve additional files such as images, JavaScript, or CSS. In Django, he refer to these files as static files. Django provides django.contrib.staticfiles to help you manage them.
On the other hand files which are uploaded by the user are called Media or Media Files.
a - When you want to serve static files that's what you have to do first:
1- Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS
2- In your settings.py file of your project, define STATIC_URL const like this: STATIC_URL = '/static/'
3- In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE as follow:
{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">
4- Store your static files in a folder called static in your app. For example my_app/static/my_app/example.jpg.
5- In developpement you must add following snippet:
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
B - Now When you want to serve media files you have to do this:
1- Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS
2- In your settings.py file of your project, define MEDIA_URL const and MEDIA_ROOT const like this:
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
3- In developpement server you must add following snippet:
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
4- inside your template i you have to get your media files (Example show your image) you must use url attribut of your model filefield:
<img src="{{app_model.model_file_field.url}}" other attribute >
I have a Django app that uses different static files such as images, css files, and js files. That being said, the documentation https://docs.djangoproject.com/en/2.2/howto/static-files/ shows two different ways to serve static files, and I've also seen developers follow both methods.
I'm currently doing it like this:
#settings.py
STATIC_URL = '/static/'
# whatever.html
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
With all my images inside the same folder as my main.css file.
But I've also seen developers following the second method of the documentation:
#settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
#urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
When using the second method, they'll have a different folder called media that is located at the same level as all main apps. Supposedly I'd leave my images in there.
I'm wondering if it's okay to follow the first method (using {% load static %}) which is what I'm doing, and what the difference between the two methods is.
Thank you!
Actually Django doesn't consider both as static files.
Static Files Images
<img src="{% static "my_app/example.jpg" %}" alt="My image">
These are the application media files and are supposed to be used in the application wide scope. They are particularly meant to be used in css, js etc.
Media Files Images
urlpatterns = [
# ... the rest of your URLconf goes here ...
]
These media files are for user-uploaded content. It particularly deals with the request response cycle.
Note:
Django disentangles user uploaded media from application media, thus making deployment, backups, and version control easier.
Background: I'm using the Django manage.py runserver for local development. I have the contrib.staticfiles in installed apps and I'm using its {% static %} template tag in my templates.
What I try to achieve: For development, I'd like to use an independent server for serving the static files but use the django development server to serve the Django app. So that I could access the page locally on my computer at http://127.0.0.1:8000, but all the static files would be served from another computer or from a different server on the localhost, as defined by the settings.STATIC_URL variable.
The problem: The settings.STATIC_URL variable is somehow overridden when I'm using the development server. So all my static files are served by the local django development server instead of what I defined in settings.STATIC_URL.
Solution: See Daniel's answer below!
settings.py:
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
STATIC_URL = os.path.join('127.0.0.1:666', BASE_DIR, 'static/')
example_template.html:
{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery=True%}
{% bootstrap_messages %}
{# Load MyApp CSS #}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700subset=greek-ext,vietnamese,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<link href="{% static 'css/my_app.main.css' %}" rel="stylesheet">
page source when using a browser:
<link href="FULL_PATH_TO_BASE_DIR_HERE/static/css/my_app.main.css" rel="stylesheet">
but expected to see:
<link href="127.0.0.1:666/FULL_PATH_TO_BASE_DIR_HERE/static/css/my_app.main.css" rel="stylesheet">
This isn't anything to do with Django or runserver. It's simply because you are using os.path.join() to join a domain and a path; that function doesn't know about URLs, and will assume that since BASE_DIR starts with a leading slash, it should normalize the whole path to start from there and ignore anything previous:
>>> os.path.join('127.0.0.1', '/foo', 'static')
'/foo/static'
The solution is twofold: don't use os.path.join on URLs, but more importantly, don't use BASE_DIR in your STATIC_URL. The filesystem directory your static files live in has nothing whatsoever to do with the URL they are exposed on. Your STATIC_URL should be something like "http://127.0.0.1:666/static/".
I am trying to add an image to my simple google app engine code, but it doesn't work if I follow the tutorial. It works if my image is in my app directory, but not when I move it to static.
When I am using it in plain html like:
<img src="../static/myimage.jpg"></img>
or
and many other variations, the image just does not show (it shows when it is outside of static dir). When I am doing it as in the tutorial, defining STATIC_URL in my settings file:
STATIC_URL = '/static/'
And adding this lines (or variations like "/my_image.jpg" and so on)
{% load staticfiles %}
<img src="{% static "my-app/myimage.jpg" %}" alt="My image"/>
causes server error (500). I am using django 1.3
Here is the directory structure:
my-app
\static
myimage.jpg
\templates
base.html
# and other html files
\urls.py, settings.py #and other .py files
App.yaml:
-url: /(.*\.(gif|png|jpg))
static_files: static/\1
upload: static/(.*\.(gif|png|jpg))
setting.py:
ROOT_URLCONF = 'urls'
urls.py:
STATIC_URL = '/static/'
What did you set STATIC_ROOT to?
Generally though, using GAE's static file handlers in app.yaml will give you better caching and probably lower cost than serving the images with django's staticfiles.