This is a sample template code in which i should be receiving the url to profile picture from views.py , when i try to print the received path it is correct however the image is not visible,
i tried adding {{STATIC_URL}} and creating a /static/ folder where the settings.py exist however this changed nothing still cant view an image ,
here is the template code
{% block content %}
<img src="{{profilepicture}}" height="200" width="200"/>
<H2>{{name}}</H2>
</br>
<H2>{{username}}</H2>
</br>
<H2> {{date}} </H2>
</br>
<H2> {{residence}} </H2>
{% endblock %}
Edit:
i tried using {{STATIC_URL}}{{profilepicture}} with no success ( i moved the photos into static folder)
Related
I have been working on a social media website where you can upload images and videos and follow other users.
I managed to upload and display uploaded files to the website.
I used FileField to load the image and video files, but when I implement it in my Template it shows both spaces, because there both using the same source url {{ source.file.url }}
models.py
class Post(models.Model):
title = models.CharField(max_length=150)
file = models.FileField(upload_to='uploads/%Y-%m-%d')
models code works perfectly
feeds.html
{% if post.file.url %}
<video class="video-context" width="500px" height="500px" controls>
<source src="{{ post.file.url }}" type="video/mp4">
</video>
{% endif %}
{% if post.file.url %}
<img class="image-context" src="{{ post.file.url }}" type="image/jpg" type="image/jpeg">
{% endif %}
heres a sreenshot empty video player over img
Now the problem is that both File Types are going trough one Model: FileField. The source is {{ source.file.url }} , the HTML is searching both files, but there only either image or video, so what can i do with the other empty file?
How can I hide it?
You can use the download link without specifying the file type.
<a href src="{{ post.file.url }}">
I am trying to store images on a database and then display them on a Django template. For some reason Django is only showing the alt (alternate - html attribute) instead of the actual image.
This is the template
{% extends "myapp/layout.html" %}
{% load static %}
{% block body %}
<div class="sidenav">
Gallery
About
Contact
</div>
<div class="main">
<h2>Gallery</h2>
{% for image in images %}
<img class="gallery" src="{% static '{{image.image.url}}' %}" alt="{{image.description}}">
{% endfor %}
</div>
{% endblock %}
This is my model
from django.db import models
# Create your models here.
class Image(models.Model):
image = models.ImageField(upload_to='images/')
description = models.CharField(max_length=50)
def __str__(self):
return "Description of image: " + self.description
This is what I'm seeing
These are normally media urls, so you render these with:
<img class="gallery" src="{{ image.image.url }}" alt="{{image.description}}">
You need to add the views regarding media files to the urlpatterns, as described in the documentation.
or if these really only contain a path relative to the static folder, you work with:
<img class="gallery" src="{% static image.image.url %}" alt="{{image.description}}">
But it is not very likely that this is the case.
Regardless what the Note that Django only serves static/media files in debug mode (DEBUG = True). If you run this on production, you will need to configure apache/nginx/… to serve static/media files.
So in my navigation bar I have tried to add an icon. However, even with the correct path given (shown with fuji.png) the image gives a 404 (NOT FOUND).
The error message in inspect element is:
GET http://127.0.0.1:8000/icons/fuji.png 404 (Not Found)
Does this mean that instead of a relative path it looks for a URL path?
navbar.html
<div class="topnav">
<nav>
<div class="logo-image">
<img src="/icons/fuji.png" alt="Mt. Fuji"/>
</div>
{% with url_name=request.resolver_match.url_name %}
<a class="{% if url_name == 'index' %}wob{% endif %}" href="{% url 'polls:index' %}">Homepage</a>
<a class="{% if url_name == 'create' %}wob{% endif %}" href="{% url 'polls:create' %}">Create a Poll</a>
{% endwith %}
</nav>
</div>
*BY THE WAY:: I get the same response with /icons/fuji.pg and icons/fuji.png.
This is my directory (not everything, only showing what is necessary):
Does anyone have an idea of why this is happening and how to fix this? The image doesn't even load in -- it is just a broken image file.
You need to set up a folder for static files in settings (like STATIC_URL = '/static/'), before trying to load them. Then, you can create icon folder there and use links to access the images there. The full guide is here.
I am currently learning Django and making my first steps. I try to build a webgallery to learn all the basic stuff. I successfully displayed some images using static files. So I tried saving Images through ImageFields and "upload_to" in my DB, saving it to my static directory. I tried to display everyone of them with a for loop in an tag. My img displays properly with using a {% static %} tag but when I try to insert a {{ }} Tag it isn't working, although it's the same url it doesn't work.
I tried changing my STATIC FILE in settings.py
I tried various other forms of nesting my {{}} in there
Reading the docs to staticfile https://docs.djangoproject.com/en/2.2/howto/static-files/
This thread Display an image located in the database in Django
This thread https://docs.djangoproject.com/en/2.2/topics/files/#using-files-in-models
My Code:
<p>Overview</p>
{% block content %}
<div>
{% for image in images %}
{{ image.img_photo }} <!-- webgalleries/test.jpg -->
{% load static %}
<img src="{% static 'webgalleries/test.jpg' %}" alt="{{ image }}"> <!-- working -->
<img src="{% static '{{ image.img_photo }}' %}" alt="{{ image }}"> <!-- not working -->
{% empty %}
<p>No content</p>
{% endfor %}
</div>
{% endblock content %}
I expect the output to be an img from my static directory.
A hint, some advice or other forms of help is highly appreciated.
Thank you so much!
okay if you want to display images from database you should do these steps :
1- go to your settings.py and write this code there ,
MEDIA_ROOT= os.path.join(BASE_DIR,"media")
MEDIA_URL= "/media/"
2- then create new folder in your project called 'media' and create folder inside 'media' called 'images' (finally result will be like this 'media/images' )
3- go to your model.py in your class that having 'img_photo'
and you should write the model like this
class Images(models.Model):
img_photo = models.ImageField(upload_to='images/',null=True, blank=True)
def get_image(self):
if self.img_photo and hasattr(self.img_photo, 'url'):
return self.img_photo.url
else:
return '/path/to/default/image'
def __str__(self):
return self.img_photo
4- go to admin.py then write :
from yourapp.models import Images
then add this line below
admin.site.register(Images)
then open your terminal or console and write :
1- python manage.py makemigrations
2- python manage.py migrate
5- in html code you must write :
{% for image in Images %}
<img src="{{ image.get_image }}" >
{% endfor %}
go to admin panel and upload any photo for test
Python, Django, pyuploadcare, html5, jquery,
The Django documentations for pyuploadcare are useful for image customization and file uploading and stuff like that, but what they don't tell you is how to display the image in the webpage. For example, i can display the URL where the image is stored, but i cannot display the image itself in the webpage
i want to make this as clear as possible to the reader so I'll give another example:
To build an image gallery, i would need all the images displayed on one page, i can do that using the for loops
for photo in photos
Photo and photos are defined in views.py
{% extends 'base.html' %}
{% for photo in photos %}
{{ photo.caption }}
{{ photo.photo }}
{% endfor %}
{% block content %}
{% endblock %}
photo.caption is an models.CharField()
photo.photo is an ImageField() from
from pyuploadcare.dj.models import ImageField
everything is working properly but i don't know how to display the images on the webpage.
Any help would be apreciated
Simple
<img src="{{ photo.photo }}" /> should be enough, as ImageField just holds the CDN URL value.