Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
In this lesson, you’re going to see how to approach debugging, which is an important part of software development! In all_projects.html, you’re trying to display everything that you have available for one project that’s inside your database.
You’re missing an image. To add an image, you’re going to have to load the static files with a template tag at the beginning of your file:
{% load static %}
00:00
In this section, we’re going to run into a little trouble. I want to include this also because it’s very, very normal for any development that you do. You’re going to have to do some debugging, so get used to it and it’s not a bad thing, all right? So, what are we trying to do here is we want to display everything that we have available for one Project that’s inside of our database. We displayed .title, .description, .technology, and that all worked fine. It’s showing up in the loop if we have more of them in there, right? So, one thing that’s missing here is the image.
00:35 Let’s talk first about how to add static images in Django, because there’s two things to it. The first is we’re going to have to load the static files, and that’s a template tag that you put at the beginning of your file.
00:50
It looks like this—oops, not like that, like this: {% load static %}. Okay? You will have to load the static files in each template where you want to be using them. Next, if you’re familiar with HTML at all, you know that an image is going to be built like this. We need a source, which is going to be the path to our image file, and then an alternative text that displays if the image doesn’t show.
01:19
Let’s start off with that and say… "screenshot of project". Okay. And over here, is the source. We’re going to be putting a link to our static file. Django just works like that—we have another a template tag in here.
01:37
And then we start it off with static and next, we have to put the path to the image. In our case, we want to be pulling that from the database, so what I’m going to say is project.image, all right?
01:54
So, we want to be pulling this—just as any other information about our project—we want to be pulling this from the database and pop it in here into our static URL after we loaded static, before.
02:06
So, it’s two times template tags, and this just tells us, “Use the path that you have associated with the static files to correctly link to wherever the file is.” Cool, so now we would think that this should display two times the same image because we added two times the same filename—I think testproject.png, that’s what we added. Let’s take a look how it looks over here. All right.
02:35 So, we would expect this to show the screenshot of the project, but it doesn’t. It actually just shows the text that we would expect to show up. One time here, you see up there, and one time down here.
02:50
So, once per project, the for loop is still working, it’s displaying it for both of them, but it’s not showing our images. I’m just going to get rid of this to make it a bit easier to see.
03:06 There you go. That makes it easier. So, screenshot associated to test project one and screenshot associated to test project number two, but they’re not showing up.
03:16 So, why is that the case?
03:22 Now we’re in a process of debugging again, right? We want to figure out what’s going on so that we can understand what’s going wrong.
03:34
First of all, we don’t have to pull this from the database. We can put in here also just the hardcoded file path. Let’s try that first, to see whether we can access this, or if something’s wrong there. Go in here. Let me see, it’s inside of projects/, like static/.
03:53
Django has access to static/ by loading static, so I don’t have to type this anymore, but then I’m going to have to go for the path projects/img/ and then the name.
04:14 Okay. Watch out that you stay clean with those, like, different types of quotes.
04:27 Just so that you know, when you’re opening up a quote, everything in here needs to be inside of the double quotes, so I need to use the single quotes in here. Let’s take a look.
04:37
I’m going to reload this, and that they are! Okay. So, both times the image now shows up. That means we have some problem in finding that right file path, but we can access the image if we type in the file path directly, hardcoded. However, we want to avoid that because we have that information inside of the database, right? That was the idea. We just save also the image file that’s associated with that Project, the path to that image file inside of our database.
05:07 Something’s going wrong there. If we have this full path, right, the image displays. If we only use what we have in the database, it does not.
05:25
So, the first question that comes up is: what is this, actually? It doesn’t seem to be the full path. One thing we can do here is we could debug in a print() statement kind of way. That’s very simple, just say—as I said before this is kind of the print() of Django in the Django template.
05:45
So here, I’m just going to pop in project.image and we see what we get.
05:52
Okay, we get the name testproject.png, but there’s not the rest of the path. So, only testproject.png. However, our idea when we were initially working with the models was that we were going to use this clever FilePathField and type in the path here—right, that says '/projects/img'—so we don’t have to add this anymore.
06:17
We just define it here, and it would go there. But it seems that there’s something wrong with that. It seems that inside of our database, it’s actually still just saved as whatever we’re typing in when we’re creating that Project.
06:31 Let’s double-check that by hopping back into the Django shell.
06:37 You can see here that we’re using all the different tools that we learned about, right? Those are actually very helpful tools to interact with Django.
06:54 Again, we’re going to have to import our model.
07:04 Now, I can make calls to the database. Let’s get all of them.
07:19
Cool, we have our two Project objects, 1 and 2. Let’s take a look at the first one
07:27
and let’s take a look at the .image attribute of that first one. 'testproject.png', okay—the same thing that got printed out, which makes sense.
07:36
We just made a query to the database and got returned what’s in there, but we thought, initially, that it would be more than that. Okay. Both of them really just have the filename saved, which is what we gave as an input, so this path argument here does not actually add anything to the database, which means that we had a misunderstanding of what is this FilePathField about. Next thing we want to do, we want to look it up online.
08:19
Okay, and reading in the documentation—don’t be afraid of the Django documentation, it has a lot of useful info—“path: The absolute path to the directory whose contents you want listed.” Huh.
08:30
“This directory must exist.” What else can we read here? “If False…the direct contents of path would be offered as choices. Okay.
08:41
So, it looks like this FilePathField is meant to allow selections of files, so the path variable defines a directory that is going to be considered—in this case, this would be projects/img/, so, the right directory—but what it is actually used for it is that if we would create a form where a user can choose a certain image, it would allow us to display all the images that are inside of this folder.
09:10
That’s what this field is about. However, that’s not really how we are creating our projects in here. We’re creating them from the console. You, as the owner of the portfolio, are going to be the only person adding images to the projects. And thirdly, like, there’s just going to be one project image associated to each Project.
09:30 Which means that it seems we chose the wrong data field for our model in here. And that’s something that happens all the time, right? That’s not a big deal. We can go ahead and change it. And in fact, that’s what we’re going to go ahead and do now, because it’s going to help us also to revisit migrations and how to interact with the database.
09:51
So, see you in the next video where we are going to go ahead and fix changing the FilePathField to a different field and finally displaying our images with the path that we’re getting from the database.
Thomas J Foolery on April 19, 2021
Also, in my template I have {% load static %} but it doesn’t seem to do anything - and worse “{% load static %}” gets rendered in the html.
Martin Breuss RP Team on April 20, 2021
Hi @Thomas J Foolery. What did you try to do to display your images? Did you:
FilePathField to a CharField as described in Debugging Part 2Related to your question about {% load static %}: How are you opening up your template file? If you open it up without running your server, then Django won’t process your template and build valid HTML from it. You’ll need to start the development server with python manage.py runserver and access the page through your web app.
Hope that helps!
Thomas J Foolery on April 20, 2021
Thank you @Martin. I was actually just trying to make sure I had the path correct before adding to the database. It was indeed an issue of rendering HTML in the browser rather than having it served.
Thanks again.
ludwigmatse on May 1, 2023
What exactly is the function of {% load static %} in the html? What does that work out? If I leave this out, everything still works fine.
Martin Breuss RP Team on May 8, 2023
@ludwigmatse loading static allows you to use the variable when referencing URLs to static files, such as CSS, JS, or images:
docs.djangoproject.com/en/4.2/ref/templates/builtins/#std-templatetag-static
bgersten on Dec. 22, 2023
I also observed the issue that @reblark struggled with in Nov, 2019. When he ran the code in the browser, he only got ihe ‘image not found’ icon rather than the alternative text indicated in the code. @Martin suggested it might be due to a typo and gave a shrug - ¯(ツ)\/¯ but also gave a useful link to a sandbox to play in: www.w3schools.com/tags/att_img_alt.asp Using the sandbox, I reproduced the problem by altering the name of the image file, deleting the height and width attributes from the <image src=”“>, and rerunning the code. I then added height and width attributes to the current code in our project and got the alternate text but not the ‘image not found’ icon. There may be others that have this problem since I was puzzled by it, too.
Martin Breuss RP Team on Jan. 3, 2024
@bgersten hm, interesting. Could you post the HTML that you used to reproduce the issue, and the code that took it away? I’m curious what this was about, can’t really remember at the moment 🤔
bgersten on Feb. 3, 2024
@Martin Breuss I just noticed your response of 1/3/24. I was expanding on your answer of 11/12/2019 to @reblark. I can’t show you HTML from this course’s project because it has been changed during the completion of the course. But I can demonstrate what I discovered using the W3Schools sandbox I linked to on Dec. 22, 2023, www.w3schools.com/tags/att_img_alt.asp .
This is the original HTML for that sandbox, slightly edited, which displayed the girl when it was run in the sandbox:
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
I then purposely misspelled the name of the image file. This showed the missing image icon and the alternate text.
<img src="img_gir.jpg" alt="Girl in a jacket" width="500" height="600">
Finally, I removed the image height and width. Now this showed the missing image icon but not the alternate text.
<img src="img_gir.jpg" alt="Girl in a jacket">
I hope the above gives you the information you were seeking regarding my prior comment.
On the side, is there a way to send an automated message to the member that their discussion question has been responded to by RP staff?
Martin Breuss RP Team on Feb. 5, 2024
@bgersten I just gave it a spin in the HTML sandbox you linked. The image alt text displays for me also after removing the width and height attributes.
So I think that’s probably something about browser defaults. I’m currently using the Arc browser on macOS.
Possible Reason
As far as I know, some browsers display the alt text only when you hover over the place where the image should be. If you specify the image dimensions using width and height, then the browser will reserve that space for the image, and if the image is not found, it will show the alt text in that reserved space.
In your final example, you’ve removed the width and height attributes. This means your browser doesn’t reserve any space for the image. So maybe there’s no space where it can display the alt text when it can’t find the image. It’ll still display the missing image icon because that’s a default browser behavior to indicate a missing image, but it’ll probably only display the alt text when you hover over the missing image icon.
Like mentioned in the beginning, the alt text displays for me even after removing the width and height, but could be that this is what’s happening in your browser. Can you double-check whether you see the alt text if you hover over the icon?
Notifications
As for getting notified about replies—you get a notification by default when someone replies in a thread that you previously posted in. So you can check your profile image and click on Notifications.
You can also click on Manage Account and set up a daily or weekly email summary of all your unread notifications.
Become a Member to join the conversation.
Get a Python Cheat Sheet (PDF) and learn the basics of Python, like working with data types, dictionaries, lists, and Python functions:
Thomas J Foolery on April 19, 2021
I’m still having trouble getting my static images to render. There’s clearly a path issue.
What should the “static path” look like in settings.py?