HTML Image Insertion Django - python

I'm working to build a django web application. I'm using adobe brackets for the html and I'm trying to use an image from my folders on the website. The image appears during the brackets simulation, but not during django runserver.
here is my folder directory:
mysite-
Images-
livestream-
helloworld.jpg
templates-
livestream-
helloWorld.html
This is a very simplified version of the site, but you get the idea.
My html code asks for the image:
<img src="../../Images/livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
when I run the django server it returns:
[18/Jul/2013 09:11:40] "GET /livestream/Images/livestream/helloworld.jpg HTTP/1.1" 404 2605
Does anyone know how to fix this issue?

This has to do with how your staticfiles app related settings are set up for your project.
You should also use the static template tag in order to fetch your static media.
For example, assuming that your structure under the location of any filepath within the STATICFILES_DIRS tuple is the following:
{{STATICFILES_ROOT_DIR}}/Images/livestream/helloworld.jpg
you can fetch the static file using:
{% load static from staticfiles %}
{% static "Images/livestream/helloworld.jpg" as myimg %}
<img src="{{ myimg }}" alt="helloworld" />

Why don't you set your {{ STATIC_URL }} in your settings, as per the docs to point to your Images folder and then just type in
<img src="{{ STATIC_URL }}livestream/helloworld.jpg" alt="helloWorld" width="590" height="269">
This is the standard approach to manage static files, and will turn out useful in the future as well

Related

Django -- Dynamically showing Images that are created daily

What I want to accomplish is have an separate application generate graphs that will be placed in a directory of my Django project. Then in my template loop through and display all the graphs from that directory on the webpage. The generated graphs will be refreshed daily and will be of varying numbers depending on the day (so some days it could be 20 and/or the next it could be 50).
Option 1)
I don't think I want to use django manage.py collectstatic everyday. I've never gotten to the point of deploying a Django project to a server but my assumption is that I would have to collectstatic manually everyday on the server (which I could be thoroughly off on here)
Option 2)
I've tried creating a model Model Picture. The Char field is just my relative path to the picture. From there in my views I'm to rendering the path in the index(request) View Picture. From there in my template I'm trying to loop through the picture relative paths and show them Template Picture. When I remove photos = Photo.objects.all() & the {% for img in photos %} in the template the page does load Webpage working. However when I run it with all those parts in there I get a blank webpage with "what do you want to do with index" at the bottom. Webpage not working
Interested to hear if there are any better way of doing this . I'm not trying to user upload an image field because the amount of graphs will be substantial.
Details on Option 2:
---Notes---
Top Lvl Directory is--chartingtest-project
chartingtest is the project
sectors is the name of the app
media folder is a folder in the top level directory, not within the project or test folder
models.py in sectors app contains
class Photo(models.Model):
photoname = models.ImageField()
views.py in sectors app contains
from .models import Photo
def index(request):
pets = Pets.objects.all()
photos = Photo.objects.all()
return render(request, 'index.html', {'pets': pets}, {'photos': photos})
index.html template
{% load static %}
<H1>Hello World Index!</H1>
#Testing bringing in variables from a model (2020/05/07 Works!)
<ul>
{% for pet in pets %}
<li>{{pet.name}}</li>
{% endfor %}
</ul>
# ************************************
# This is where I'm trying display generated pictures from the media folder
# ************************************
<ul>
{% for img in photos %}
<li>
<img src="chart1s/{{img.image.url}}" />
</li>
{% endfor %}
</ul>
#Testing Static Image (2020/05/08 Works!)
<img src="{% static "OIP.jpg" %}"/>
<img src="{% static "temp_fig_00.png" %}"/>
settings.py in chartingtest project folder
#Media ROOT
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
You are correct that using static files will not work, by their name static files are not supposed to change.
The solution is to create a media folder and have your application save the graphs to that folder. Your model picture should point to that folder. Like you said, in your templates you can then iterate over that model to display all the graphs.
In production, you should create a cloud storage bucket and save your images there. Then make sure your settings.py directs any requests for images to your storage bucket.
Your picture model should use models.ImageField(), not a typical CharField, image = models.ImageField(). In your template as you iterate, you should call each image with <img src="{{ picture.image.url }}"
Apart from that, I would need to look in depth at the code to see what's going on, and I don't click links on stackoverflow posts. If you'd post the code in a comment might be able to take a closer link, but try those things first!

How can I embed every image in a directory in an HTML page using Django?

I am trying to create image tags for every file in a directory located in static in my Django project. What is the best way to do this? I suppose I could write pure python with os.listdir and just use strings to concatenate the image tags together using the filenames, but I'm sure there's a better way using Django's HTML formatting. Haven't been able to figure it out.
Example: In a folder there is img1.jpg and img2.jpg.
How can I produce:
<img src="img1.jpg" alt="img1.jpg" height="100px" width="100px">
<br>
<img src="img2.jpg" alt="img2.jpg" height="100px" width="100px">
<br>
I'm not clear about what you're looking for, but from
create image tags for every file in a directory located in static
I'm assuming that you're looking to load image using the {% static %} tag:
{% load static %}
...
<img src="{% static 'path_to_image' %}" alt="img1.jpg" height="100px" width="100px">
<!-- Watch out the single and double quotes -->
Do remember to include this in your settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'), // or wherever you put your static files
]
I think it's now automatic, but check your INSTALLED_APPS:
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
]
Compared to hard-coded paths like C:/foo/baz/bar/, it's better to load static tags because it always works on different platforms as every operating system has its own way to handle files, which I hope answers your question.

How to use autoescape off AND static variables inside django template

I'm using auto generated HTML which has been saved to a file and then read in again to use as part of a page in a django template.
In order to do this I have used:
{% autoescape off %}
{{ my_html }}
{% endautoescape %}
However, in the my_html variable, I have some static content. This comes in the form of something like this:
<img src="{% static "img/tree_report.png" %}" width="12px" height="12px"/>
My issue is that the static content is not displayed. I get:
http://127.0.0.1:8000/%7B%%20static 404 (in the browser error report)
I read something about get_static_prefix in another question but that doesn't solve my problem because I just get this instead:
GET http://127.0.0.1:8000/%7B%%20get_static_prefix%20%%7Dimg/tree_report.png 404 (Not Found)
I also tried endautoscape turning on and off periodically in my_html in the saved HTML variable. That also didn't work.
Should I be autogenerating the development and production static files paths for my_html or is there a more elegant solution to this problem?
Any suggestions are most welcome.
Thanks.

Django image does not display in template

I am using Django and i want to import an image to my about.html file
Both the picture and the about.html are in the same file, see the picture down
i am trying to insert the image like this, but i get a broken picture icon
<img src="templates/WebApp/rolomatik_logo_crna_verzija.png"
Any suggestions please?
You cannot insert an image in that way. You need to keep that in a static folder.
Create a folder named static and place your image inside it.
Then use {% load static %} at the top of your template.
Your img tag should look like this: <img src="{% static "rolomatik_logo_crna_verzija.png" %}" />
For more details refer: https://docs.djangoproject.com/en/1.11/howto/static-files/
You should create a folder static in your app. Inside that you have to create another folder with name same as your app name. In your case it should be SmartApp/static/SmartApp/ and put your image in the folder.
After this use {% load static %} at the top of your template,inside your <head> tag. After this you can use the image like this:
<img src="{% static 'SmartApp/rolomatik_logo_crna_verzija.png' %}" >

How to make a pdf link in Django

I'm extremely new to Django and I was hoping someone could help me add a link to my website which allows someone to download a pdf file. The pdf file is located here:
static/files/offline_reg_form.pdf
and I have no idea what the URL should be in the urls.py file or the view in the views.py file. I have looked around but nothing is working as I want it too.
Any help would be great, thanks!
For you specifically:
{% load static %}
my pdf
This will answer your questions.
https://docs.djangoproject.com/en/1.10/howto/static-files/
If it still confuses you,
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image"/>
is an example of what should be in your template.

Categories

Resources