Image broken HTML even with correct path - python

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.

Related

Django: Using a for loop to view all images from my db - using img src

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

Iterate through a static image folder in django

I am trying to get all image link present in a folder. Currently, I am assigning the link manually. But, I want my django to get all images from a specific folder irrespective of their names.
<li>
<img src="{% static "styles/jamia/1.jpg" %}">
</li>
<li>
<img src="{% static "styles/jamia/2.jpg" %}">
</li>
I am looking for something like:
{% for file in {% static "styles/jamia/" %} %}
<img src="{{file}}" alt="">
{% endfor %}
All images are present in jamia folder.
This isn't something Django has built in. But Django is just Python, and you can use normal Python file functions to get your list in the view:
files = os.listdir(os.path.join(settings.STATIC_ROOT, "styles/jamia"))
This seems to have been answered in parts before, but probably requires some searching for all the answers. So in an attempt to provide a complete answer to this questions in one place:
In views.py you would want to do something like the other answer says:
context_dict = {}
files = os.listdir(os.path.join(settings.STATIC_DIR, "styles/jamia/"))
context_dict['files'] = files
return render(request, 'home.html', context=context_dict)
Then in your html template you can loop over your images. In addition, we make use of with to join the root to the static file with those names pulled out in the views.py, but you could have concatenated the whole path in views and not needed with. So, in home.html:
{% for file in files %}
{% with 'images/'|file as image_static %}
<img src="{% static image_static %}" alt="">
{% endwith %}
{% endfor %}

django set image src path

I want to set an image as a submit button form:
<form action="/final" method="post">{% csrf_token %}
<input type="hidden" name="title" value="niloofar">
<input type="image" name="submit" src="cat.jpg">
</form>
The image is in the template directory and the image is not shown.
How should I manage it with STATIC_URL = '/static/'?
Should I make a directory called static and put the image there?
And how the form should be changed?
You need to properly configure your static files. More info can be found in Django docs
Additionally, make sure you are writing the correct path the image, as shown in the docs:
{% load staticfiles %}
<img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>
Now some changes are there to be noted.
You should not load your static files with
{% load staticfiles %}
Instead you should write
{% load static%}
And in source (denoted as src), you should give path of image file from static folder located in your directory. Not from the local resources.

Add img with a variable src in django

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)

Opening external Url in Django template

I've a Django template like this:
<ul>
{% for url in urls %}
<li>{{ url.url_title }}</li>
{% endfor %}
</ul>
Url is a model that stores Url name and Url title of that particular url. I thought by using this template, I might be able to open the page and get redirected to the external url specified in:
<a href="{{ url.url_name }}">
Turns out, I can't. How do I achieve this? I'm a newbie in Django and don't know what to do.
I supposed url_name is Charfield type, and it is something like example.com or starting with http or https, for all above cases, the below worked for me:
<a href="http://{{ url.url_name }}">
If you used URL type for the url_name, then your solution should work and your problem is not with tag.
Please, try with:
<a href="{{ url.url_name }}" target="_self">

Categories