I know there are other similar questions but solutions are not working for me, I did try Heroku's django settings suggestion as well but still no luck.
At first no images/videos showed, I eventaully moved static folder around to get it to work.
Now Images and videos display fine on my Heroku site on the general pages but my search result images still do not display.
Update:
These images are just pictures of products. They are like any other images that are working on the site. They are static images pre-loaded to the folder they are held in, called 'products'. The only difference is the path is not directly called in the html. What I mean is other images are called like "{% static 'assets/images/logo/logo_default1.png' %}" Where the search results are called like "{{ result.object.photo.url }}"
Here is my setting file:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.join(BASE_DIR, "public/static"))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "mysite/static"),
)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.join(BASE_DIR, "public/media"))
Here is my search page html:
<br></br>
{% for result in page.object_list %}
<div class="col-md-9">
<div class="row">
<div class="col-sm-5">
<div class="row">
<div class="col-sm-12">
<div class="shop-item-slider">
<ul class="bxslider">
<li>
<img src="{{ result.object.photo.url }}" alt="img-theme">
</li>
<li>
<!--<img src="{% static 'assets/images/logo/logo_default1.png' %}" alt="hi">-->
</li>
</ul>
</div>
**Note this all works fine locally, it is just on Heroku search images do not show for my search results.
I know it has to do with the static settings but not really sure what needs to change, again I have added the folder of images to the static asset folder with the other images that do work but still nothing.
Related
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 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" />
Hey everybody i have a problem with this code which i try to run on local host server , in this situation im followin an online project over youtube and he is trying to make an online resume, at the start we tried to make a simple home template which i stock in it so if u can help me to fix the problem in which cause to rise this error
'Static' is not a registered tag library. Must be one of:
admin_list
admin_modify
admin_urls
cache
i18n
l10n
log
static
tz
and this the code itself:
{% load Static %}
<link href="{% static '/css/main.css' %}" rel= "stylesheet" type="text/css">
<h3> Hello world! <h3>
<img src="{% static 'images/me.profile.jpg'%}"
this is the setting.py by the way:
STATIC_URL = '/static/'
MEDIA_URL = '/Images/'
STATIC_DIRS= [
os.path.join(BASE_DIR, 'static')
]
The tag is {% load static %} without the capital S.
it's a recommended way or templating engine rules first make folder template or static folder then in template make a new folder app_name.
then in app_name work on static files.
in your app make a folder name static in it you make another folder name of your app_name init you work on your static files
e.g
static/app_name/images/me.profile.jpg
maybe problem also in this name me.profile.jpg please change it to
profile.jpg.
you don't need to change anything in setting.py because static root default set .
{% load static %}
<link href="{% static 'app_name/css/main.css' %}" rel= "stylesheet" type="text/css">
<h3> Hello world! <h3>
<img src="{% static 'app_name/images/me.profile.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.
I'm somewhat confused as to how Django operates with static content. Essentially, in the settings.py file, we define MEDIA_URL which points to the URL to use when resolving static media such as scripts and styles, as well as MEDIA_ROOT, a reference to where things live on the filesystem.
However, it doesn't seem clear how I can get access to MEDIA_URL from a template, and it's kind-of-important if I want to use Django's mechanism for loading static content at all. Essentially, I have my base template looking somewhat like this:
<html>
<head>
{% block styles %}
<link rel="stylesheet" href="{{ MEDIA_URL }}styles/master.css"/>
{% endblock %}
<title>{% block title %}Page Title{% endblock %}</title>
</head>
<body>
{% block scripts %}
<script type="text/javascript" src="{{ MEDIA_URL }}scripts/jquery.js"></script>
{% endblock %}
</body>
</html>
Will the above code actually work? I've heard that you have to use other plugins to get something like this up and running, which seems kind of strange, as presumably the whole point behind defining MEDIA_URL is to use it in templates.
To access STATIC_URL in your templates, make sure django.core.context_processors.static is in TEMPLATE_CONTEXT_PROCESSORS, and that you're using a RequestContext. More details here.
In addition, static files should be placed under STATIC_URL, not MEDIA_URL, unless it is user-uploaded content.
I would say that you dont have to use MEDIA_URL and MEDIA_ROOT for your Js,css,img files!
I use STATIC_ROOT,STATIC_URL instead! as far as I know MEDIA_* is for upload of files, such as images, or any document!
Also I use STATIC_* because in my case, I have my js,css,... files in a S3 storage! so when I run collectstatic it just copy all my STATIC files to my cloud storage! So in my templates I have something like this:
{% block js %}
<script src="{{ STATIC_URL }}js/libs/modernizr-2.0.min.js"></script>
<script src="{{ STATIC_URL }}js/libs/respond.min.js"></script>
{% endblock %}
Check it out this note from Django docs:
Note In previous versions of Django, it was common to place static
assets in MEDIA_ROOT along with user-uploaded files, and serve them
both at MEDIA_URL. Part of the purpose of introducing the staticfiles
app is to make it easier to keep static files separate from
user-uploaded files.
For this reason, you need to make your MEDIA_ROOT and MEDIA_URL
different from your STATIC_ROOT and STATIC_URL. You will need to
arrange for serving of files in MEDIA_ROOT yourself; staticfiles does
not deal with user-uploaded files at all. You can, however, use
django.views.static.serve() view for serving MEDIA_ROOT in
development; see Serving other directories.