Have tried all available solutions. My settings.py is here
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)
Home.js file, which is the front end home page is here
<Image
bordered
rounded
size="large"
src={"/static/2461.jpg"}
/>
<div>
<img src={'/static/2461.jpg'} />
</div>
<div>
<img src={'/static/https://images-na.ssl-images-amazon.com/images/M/MV5BMDg2YTI0YmQtYzgwMi00Zjk4LWJkZjgtYjg0ZDE2ODUzY2R'} />
</div>
and have placed assets folder topmost in the hierarchy. I would be helpful if someone can help me in resolving this issue.
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" />
I am working with images uploaded using ImageFields and upload_topath and name, and these images end up in the correct directory media/img/whatevs/. In my settings.py I have the following two lines.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Now, in the template that matches my / URL, these images display properly and I can see/inspect that the path ends up pointing correctly to media/img/whatevs/imgname.jpg
However, when I want to display these images in another template called product.html that does not match the / url, then the path ends up pointing to product/media/img/whatevs/imgname.jpg instead of to media/img/whatevs/imgname.jpg, resulting in a 404. Somehow the name of the template is added to the img src path automatically. If I inspect it I see that the text points to media/img/whatevs/imgname.jpg but then if I hover my mouse over it I end up seeing this http://127.0.0.1:8000/product/media/img/whatevs/imgname.jpg.
For clarity I add what I have in my files:
urls.py
urlpatterns = [
path('', HomeView.as_view(), name='home'),
path('product/<slug>', ItemDetailView.as_view(), name='product'),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
models.py
class Item(models.Model):
image = models.ImageField(upload_to=get_image_upload_path)
settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
product.html, where it does not display
<img src='media/img/whatevs/{{ item.slug }}' class="img-fluid" alt="">
home.html, where it displays properly
<img src='media/img/whatevs/{{ item.slug }}' class="card-img-top" alt="">
I am working with Django 3.0.6 in debug mode.
Any clue what I am doing wrong and why the template name is added to the path and how to prevent it?
The reason why it works on homepage and not in the other pages is because HTML anchors paths are relative since they are missing a slash(/) at the beginning. But still it is best practice to you link Item.image this way:
<img src='{{ item.image.url }}' class="img-fluid" alt="">
if you uploaded images and you configured settings settings.py well and also your urls.py do there is no need of force you html to found the images like this
<img src='media/img/whatevs/{{ item.slug }}' class="img-fluid" alt="">
you have to do it like this
<img src='{{ item.slug.url }}' class="img-fluid" alt="">
this will work better
The problem is you use relative paths in the template, instead of this:
<img src='media/img/whatevs/{{ item.slug }}' class="img-fluid" alt="">
you should have that:
<img src='/media/img/whatevs/{{ item.slug }}' class="img-fluid" alt="">
It would be a good idea to have the model return full path, it's not a good practice to put the paths in the template.
I tried uploading images from the django admin but the images uploads as an empty image. Here's my settings for my project
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')`
And here's my html for my html handler:
<div class="row featurette">
<div class="col-md-3 ">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" src="{crimes.images}" alt="Generic placeholder image" width="200" height="200">
Do u have something like this in your urls.py file? As it is said here.
if DEBUG:
from django.conf.urls.static import static
urlpatterns += static(
MEDIA_URL,
document_root=MEDIA_ROOT)
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.