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)
Related
when click on "yo" I am able to see media file but when tried to display image through the image tag it is not seen on webpage
yo
<img src="{{status.adv.url}}" width="250" height="250" alt="advertise"/>
Change this
<img src="{{status.adv.url}}" width="250" height="250" alt="advertise"/>
to
<img src="{% static status.adv.url %}" width="250" height="250" alt="advertise"/>
and include {% load static %} template tag on the top of your template(s)
Your project url.py should have these
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)
Documentation: Managing static files (e.g. images, JavaScript, CSS)
It was add blocker used by me. so disable your add blocker.
If you want to confirm that it is add blocker open your chrome and in console you will find this "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT"
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.
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.
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.