I am doing the Tango with Django tutorial. I am using Django version 3.1.1. I was able to get my image to load on the local link 'http://127.0.0.1:8000/static/images/rango.jpg'
I am not getting it to load on to the index.html the code is
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title> Rango</title>
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{{ boldmessage }} </strong><br />
</div>
<div>
About<br />
<img src="{% static
'images/rango.jpg' %}"
alt="Picture of Rango" />
</div>
</body>
</html>
I did try removing the "alt=" in html but that didn't work.
I do not think the problem is my settings.py, but I'll share some parts of the settings.py anyway.
TEMPLATE_DIR = os.path.join(BASE_DIR,'templates') # this is the file path for templates
STATIC_DIR = os.path.join(BASE_DIR,'static') # this is the file path for static
STATICFILES_DIRS = [STATIC_DIR,]
...
#At the very bottom...
STATIC_URL = '/static/'
I had the same problem some time ago. Applying these changes solved it. Remove STATIC_DIR and STATICFILES_DIRS from settings.py and replace them with these:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, '/static/'),
)
So the problem ended up being how the image html was wrapped. It needs to be one line, like below.
<img src="{% static 'images/rango.jpg' %}"alt="Picture of Rango" />
Related
I have tested to embedded css style into html template, but it doesn't load css files, my configure as below, could you please help assist ?
checkstatic\showstatic\templates\index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
<head>
{% load static%}
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
</head>
<body>
<img src="{% static 'logo1.png' height="200" width="200" class="d-inline-block align-top" %}" alt="">
<h1 class="test">hahahaha</h1>
</body>
</html>
checkstatic\static\css\mystyle.css
.test{
color: red;
}
my settings:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'showstatic'
]
...
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'checkstatic/static/')
]
when i access the index site, it only apply h1 tag, it can not load red color as the css config.
Statics are used to get and use complete files (css, images, js, etc), in your image it should be:
<img src="{% static 'logo1.png' %}" height="200" width="200" class="d-inline-block align-top" alt="">
Leaving the properties of the img outside the static block.
first you should create directory=> static*
after then add base directory in setting:
STATICFILES_DIRS = [
BASE_DIR / 'directory_name'] // typically the name is: static_root
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR , 'media')
then: insert urls in main project
from django.conf import settings
from django.conf.urls.static import static
+static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)
!!attention !! ==> you should insert {%load static %} at above each of html pages
if you want to know more, follow https://docs.djangoproject.com/en/4.0/howto/static-files/
I'm trying to load in bootstrap into my html page but I get a 404 status code in the network tab in the developers tools saying that it could not find the file
the request url is
http://127.0.0.1:8000/static/css/bootstrap.css
this is my html page where I am trying to use to the file
<!-- templates/base.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dog Groomers</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/bootstrap.css' %}"/>
</head>
</html>
Here is my file structure
in my settings.py file
STATIC_URL = 'static/'
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
#edit wasn't included before in question
DEBUG = TRUE
Do I need to have a static folder in every folder instead of just having it in the root?
Kindly update your settings.py
You are using this:
STATICFILES_DIR = [os.path.join(BASE_DIR, 'static')]
Try this one, it should work!
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I followed this answer here and read the tips here about serving static images. But I'm baffled: The official Whitenoise docs said to write the URLs this way:
<img src="{% static "images/hi.jpg" %}" alt="Hi!" />
And NOT this way:
<!-- DON'T WRITE THIS -->
<img src="/static/images/hi.jpg" alt="Hi!" />
But if I were to use a dynamic URL, such as src="{{recipe.image.url}}", how do I do it?
The first img tag you had is the correct way of pulling static files from your static directory. Whitenoise simply helps serve images/media files on Heroku servers but it isn't needed for local development. To properly use static, however, you need to load static at the top of each template. Example:
<!-- template.html -->
{% extends 'base.html' %}
{% block content %}
{% load static %}
<!-- show static image -->
<img src="{% static 'images/hi.jpg' %}" alt="Hi!" />
<!-- show dynamically -->
<img src="{{ item.image.url }}" alt="{{ item.name }}">
{% endblock %}
Note that the actual path to the image, images/hi.jpg, is in single quotes so as to not conflict with the outside double quotes
I fixed the issue, but I don't understand why. So if anyone can explain it, I'll accept that answer. I have two root folders,static and staticfiles. Each had their own folders images and media. I removed all the existing images, made changes to the code (see below), and re-uploaded the images--and viola! It worked--and worked on Heroku.
STATIC_URL = '/static/' # Didn't work
STATIC_URL = '/staticfiles/' # Yes, worked
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_TMP = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
MEDIA_URL = '/media/' # Didn't work
MEDIA_URL = '/staticfiles/media/' # Yes, worked
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # Didn't work
MEDIA_ROOT = os.path.join(BASE_DIR, 'staticfiles/media/') # Yes, worked
I have created a Static folder with img folder. It has a image: dog.jpg
euskaraz>euskaraz>static>img>dog.jpg
HTML template:
{% load static %}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<img src="{% static 'img/dog.jpg' %}">
</body>
</html>
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Inspecting element:
All project:
Where is the problem?
Thanks!
First, add your extra static directory to STATICFILES_DIRS settings
STATICFILES_DIRS = [
("some_cool_name", os.path.join(BASE_DIR, 'euskaraz/static')),
]
then, in your template,
{% load static %}
<img src="{% static 'some_cool_name/img/dog.jpg' %}">
I want to use static file in my django 2.0.5 template that is located on:
https://my_cloud_front_adress.cloudfront.net/staticfiles/picture_small.jpg
On Heroku i've set varible:
STATIC_URL = https://my_cloud_front_adress.cloudfront.net/staticfiles/
templates/base.html
{% load static %}
{# this one is NOT working #}
<img src="{% static 'picture_small.jpg' %}" alt="my test image"/>
{# this one is working #}
<img src="https://my_cloud_front_adress.cloudfront.net/staticfiles/picture_small.jpg" alt="my test image"/>
How should i set STATIC_URL to make this work in the template:
<img src="{% static 'picture_small.jpg' %}" alt="my test image"/>
As per django documentation you need to..,
django.contrib.staticfiles add this to INSTALLED_APPS.
add STATIC_URL = '/static/' to your settings.py (I think you forgot to add this.)
Add {% load static %} at the top of your template.
Then use <img src="{% static "my_app/example.jpg" %}" alt="My image"/>
In addition you also need to add STATICFILES_DIRS
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
The STATIC_URL value you give will be relative to your app, so adding an external url there doesn't make sense. If you want the files to be locally sourced, you should download them and store them locally in your app in a directory specified in STATICFILES_DIRS, and configure your static files as described in the Django docs.
Otherwise, you can just access the files directly by the url, without trying to treat them as static files in your project.
user3170828 answer is correct, but to add you can try with django-storages, which will take care of syncing static files to S3/Cloudfront and URL.