Locked learning resources

Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Locked learning resources

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Debugging: Part 1

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:

HTML
{% 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:48 I’m entering the shell.

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.

10:02 See you in the next video.

Avatar image for reblark

reblark on Nov. 3, 2019

I simply do not understand this:

...{% static project.image%}...

How is it that the database is named “project” ? Where does that happen? And why is it “....image” instead of “....img”.

Plus my code <img src="{% static project.image %}" alt="screenshot of project"> does not return the alternate text, but does return the empty image icon.

Clearly, I am having trouble with debugging. Except, prior to this, I found four problems in my code and fixed them.

Avatar image for reblark

reblark on Nov. 3, 2019

Wow. I am really lost. You say we have “two times the same file name.” Really? I only see once instance of testproject.png. Further, I don’t understand how the code you just wrote refers to this particular file.

Plus, I can’t find my database files. We entered info in the Django shell, but I can’t find the database tables. In the project viewer in Pycharm, I see sqlite3, but in the database viewer on the right, I just see db and it has nothing in it.

Avatar image for reblark

reblark on Nov. 3, 2019

I have images in the proper place and I can view them when I hard code the image path as you show. It’s great, but I have some problem with the database, I think.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 3, 2019

Let’s look at two aspects of your questions here:

Viewing the Database Contents

Not sure why you can’t view the contents of your SQLite file in PyCharm’s Database explorer. You might need to set it up first, and you can follow these instructions to do so: www.jetbrains.com/pycharm/guide/tips/create-sqlite-connection/.

If for some reason this doesn’t work, or if someone doesn’t have the professional version of PyCharm, you can instead us the free DB Browser for SQLite.

Give it a go and see whether you can view the entries in your Database.

File Path vs. Project Instance Attribute

I think you might be mixing up two different things here:

  • File Path: This is the location of your image file in your project. Think about where it resides in your folder structure. The file path of the one file you used so far is in projects/img/testproject.png.
  • Project Instance Attribute: As defined in your models.py, you are using a Project object that has an attribute called image. In that image attribute you are defining the path to the image file (see above).

This means that project.image should refer to a path string, e.g. projects/img/testproject.png. It’s a variable pointing to a value.

Further, the project variable name comes from your for loop in all_projects.html. You say:

{% for project in projects %}
    <img src="{% static project.image %}" alt="screenshot of project">
{% endfor %}

project is the iterator, the identity of it changes and refers to each of the Project instances that you created, which again corresponds to the rows in your database.

project.image therefore refers to the image attribute of each Project instance, which in turn is a variable for the path to the image’s location in your project starting from the static folder down the file structure. There’s a lot going on here and it’s easily confusing. Try to revisit and understand what the different pieces are:

  1. The file path of an image file
  2. The Project instance with an image attribute
  3. The iterator that you called project (lowercase p!), which is a reference to every Project (capital P!) instance

Hope that helps to clarify it.

Avatar image for reblark

reblark on Nov. 4, 2019

Thank you for this detailed comment. Much of this stuff I do know but somewhere, I am missing something. So, I am going to do these two lessons (debugging) again. Couple of things I wonder. If I drop images into the image folder, is that a problem? In other words, do I have make a database entry for each image? Also, in the python shell. I thought [] is mutable. In other words, if I wanted to change the file name in the folder from 720720 to 720720.jpg, I would simply enter image[0] = ‘720720.jpg’ (it’s the first file in the folder), but that didn’t work.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 5, 2019

You are not editing files when you work with the Django shell. While it’s possible to change file names with Python, you aren’t doing anything like that in this tutorial.

Lists in Python are mutable, that’s correct. However, you are not changing the file name when you type the code you mentioned into the console:

image[0] = '720720.jpg' 

What the code above does is replace the first item of a list called image with the string '720720.jpg'.

There are a couple of assumptions you are making with this code snippet that don’t correspond to the project you’re working with, most importantly:

  • You are not editing files (nor file names)
  • Django ORM objects are not lists

Check out our Guide to Object-Oriented Programming to refresh what that means.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 5, 2019

It is perfectly fine to drop image files into the img folder–that is exactly what you are meant to do and where the image files on my computer come from. I took some screenshots and dropped them into the img folder.

What you are doing with the Django shell and what you are putting into the database is simply a string representation of the location of the image files, not the actual image files.

Does that make sense?

Avatar image for reblark

reblark on Nov. 6, 2019

Hi Martin, Thank you for these responses. I have sorted through them all and understand them for the most part. The part about these not being lists is something I want to address later but for now I hope to understand why my code below returns the standard html missing file icon but not the alt message:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test-11.6.19</title>
</head>
<body>
    <h1>Hello, again!</h1>
    {{ projects }}
    {% for project in projects %}
        <img src="{% static project.image %}" alt="There is a problem acquiring the image.">
        <h1>{{ project.title}}</h1>
        <p>{{ project.description }}</p>
        <p>{{ project.technology }}</p>
    {% endfor %}


</body>
</html>
Avatar image for reblark

reblark on Nov. 6, 2019

Something else I have noticed. The code to produce the image, whether it’s static or pulled from the database, is at the top of the html code. When I run my code with the “print” example, the image file name appears above the <h1> tab, which I believe is correct. However, the “file not found” icon appears at the bottom. Also, in your example run with the “print” code, both the alt entry and the image file name appear at the bottom of lines for test project. The questions here are why do both the file name and the “alt” entry appear and why are they at the bottom?

Avatar image for reblark

reblark on Nov. 8, 2019

In Debuggin 1 at 2:07, you say something about “two time template…” I cannot understand it. What did you say?

Avatar image for reblark

reblark on Nov. 8, 2019

I have looked at this so many time and I have asked you about it but did not get an answer. This line: <img src=”{% static project.image %}” alt=”There is a problem acquiring the image.”> Does not produce the text when I go to localhost:8000/orojects. The page does display the “file not found” icon from html. Your displays show the text. Why are they different?

Avatar image for reblark

reblark on Nov. 8, 2019

OK. I think I know this pretty well now. But. What is missing has to do with the database. The original entries that I made using the django shell, are still there. I have changed the entries in the image column many times using the PyCharm database inspector. I have gone over this video and redone my code so many times that I know there is not an answer to my question in the videos. If, in the Django shell, I enter something like projects[1].image, I get the original file name, as opposed to the current one. When I try to change it by entering projects[1].image = ‘whatever.png’ it doesn’t work. I get a TypeError: “QuerySet’ object does not support item assignment. You have told me that before but I tried it anyway because you haven’t told me how to change the database entries. Please tell me how to do that.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 9, 2019

Hei @reblark–you can change the database entries both from within PyCharm, as well as through the Django shell:

PyCharm Database Inspector

Just as you probably did, you can double-click on a cell and then edit it. Before the changes will be propagated to your database, you’ll have to click the Submit button on the top row of the menu of the Database Inspector.

Check out this resource that explains it more and shows an image of how the button looks like.

Django Shell

Here you are working with Python objects that you receive by doing database queries.

You can change the attributes on these items, and the image path is one attribute on a row object. However, to propagate the changes you’ll again need to commit and save them to the database–similar as you have to do it with a button click when using the PyCharm database inspector.

The error that you are getting seems to indicate that you might be working with a ~list (a QuerySet object) instead of a single row instance object.

To debug, you can assign the output of projects[1] to a variable and inspect that variable in more detail. Is it one object, or a collection of objects? Can you access the .image attribute correctly? What happens when you try to change it (it should work–even though it still won’t be in your database until you commit the changes!!). If you get an error, what suggestions come up when googling it? Etc.

I’d suggest you look into the learning path on object-oriented programming that I mentioned earlier, it’ll be helpful to get a good grasp on these concepts.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 9, 2019

At 2:07 I say:

two times template tags

and that’s about using Django’s template tags {% %} both for:

{% load static %}

and the <img> tag’s src attribute further down:

<img src="{% static project.image %}">
Avatar image for reblark

reblark on Nov. 10, 2019

I could try this: If you want to remove all the data from all your tables, you might want to try the command python manage.py flush. This will delete all of the data in your tables, but the tables themselves will still exist. Then try to re-enter the correct file names. What do you think?

Avatar image for reblark

reblark on Nov. 10, 2019

Oh, thanks for the response about two times template tags.

Avatar image for reblark

reblark on Nov. 10, 2019

Also, I still haven’t heard why my text of the alt tag doesn’t show up instead of the html file not found image.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 10, 2019

Sure, you could try flushing your DB and then putting back the information. You can even delete the SQLite file (=your DB) and Django will re-build the tables for you.

However, editing it as I mentioned above should work as well.

If you just want to see the images display, you can also change the file name of your image files to fit whatever is recorded in the DB at the moment. It’s just important that the path to the image file (including it’s name), and the path that is recorded in the DB match each other.

Avatar image for reblark

reblark on Nov. 11, 2019

Thanks. I did the flush and build a new database. The interesting part is that the db inspector lists the new items as 4,5,6 while 1,2,3 (the files I first entered are gone. I am sure that I will understand that someday. It seems that the db entries go to some mysterious place in the universe.

The more interesting question for me is the one that I have asked three times, “why my text of the alt tag doesn’t show up instead of the html file not found image.”

Perhaps I have missed the answer, but I certainly have not seen it.

Avatar image for reblark

reblark on Nov. 11, 2019

Also, I finally got the bit about small p projects just being an iterator. I would like to suggest using a different word for the iterator. As you know, it could anything, even “x”. But, while it’s good to use something relevant I think “project” is a confusing choice. I think using a word that simply stands out as an iterator is a better idea. Two cents.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 12, 2019

I hear you, but I personally wholeheartedly disagree. Using explicit and descriptive naming in your coding practice makes reading, understanding, and debugging code much easier, and more future-proof.

I’d suggest to always use descriptive naming for your iterators, rather than using x or i. Doing so makes reading Python for loops like reading an English sentence:

for (each) project in (all the) projects (that exist): (do something on each) project

In a Python for loop, you are actually iterating over the instances–in this case the individual Project objects. project is not just a throw-away iterator as it is in some other languages, it is the actual object picked out of the iterable.

Avatar image for Martin Breuss

Martin Breuss RP Team on Nov. 12, 2019

Regarding your alt text not showing up: I don’t know why it isn’t showing up. If you are using it as intended then it should be appearing if your image file cannot be found.

You might have a typo somewhere or who-knows-what ¯\(ツ)\/¯

My tip is to try to make an alt tag work as expected on a tiny example, e.g.: * build a minimal HTML page and link to an image using a hardcoded path * does the image show up? * change the path so it cannot find the image file * does the alt text show up instead?

Once you got that minimal example to work as expected and you understand what’s happening there, move forward to implementing it in your Django app. Follow the steps described above again, but now working in a Django app + template.

Avatar image for reblark

reblark on Nov. 14, 2019

I totally agree with using descriptive naming and being consistent with PEP 8. Effective descriptive naming may be in the eye of the beholder.

Re: the alt tag, my code perfectly matches yours with this different result. I am not going to worry about it for now.

Thanks for being so responsive.

Avatar image for mogwaimonkey

mogwaimonkey on Dec. 31, 2019

Hello, i am unable to get the browser to show the images. Instead it shows the alt text.

The message from the server is this: “GET /static/testproject.png HTTP/1.1”

I assume the problem is it’s missing the projects/img part of the path i.e. it should read /static/projects/img/testproject.png

This is my class Project where i have entered ‘projects/img’:

class Project(models.Model): title = models.CharField(max_length=100) description = models.TextField() technology = models.CharField(max_length=20) image = models.FilePathField(path=’projects/img’)

This is the for loop code i used in all_projects.html:

**{% for project in projects %}

    <h1>{{ project.title }}</h1>
    <img src="{% static project.image %}" alt="image not available">
    <p> {{ project.image }} </p>
    <p> {{ project.description }}</p>
{% endfor %}**

The browser is showing this part of the code: <p> {{ project.image }} </p>

as this: testproject.png

Also when i look in the sql database the image column for Project is also showing this: testproject.png

I assume it should be showing this instead: projects/img/testproject.png

Any idea why it is not showing the full path or what is wrong?

Avatar image for mogwaimonkey

mogwaimonkey on Jan. 1, 2020

Update: I have since created a new object/row in the sqllite project table. I explicitly put the image path as ‘projects/img/daily.png’ and this results in that image being shown in the browser.

So the issue is definitely as a result of the Project class function not appending ‘projects/img’ to the start of the image column values that we assign.

Avatar image for mogwaimonkey

mogwaimonkey on Jan. 1, 2020

Oops, please ignore my previous comments. I realise this all explained in the very next part of the tutorial.

Avatar image for Martin Breuss

Martin Breuss RP Team on Jan. 4, 2020

@mogwaimonkey Yes, that’s a little bug 🐛 we’re running into here. Sounds like you did a great deep-dive and figured things out for yourself (best way to debug, so well done! 👏).

For anyone else who is initially confused why the images don’t show up, please go ahead and watch Debugging Part 2.

Avatar image for reblark

reblark on Feb. 26, 2020

When you are trying to solve the db access problem with the static images, you insert a print statement. But, when you run it, it only prints for two instances not three. Why?

Avatar image for Martin Breuss

Martin Breuss RP Team on March 1, 2020

That’s simply because there are only 2 objects in the database. If you look closely, also the web view shows only two items.

Avatar image for Dave Wilson

Dave Wilson on March 26, 2020

I just want to give props to Martin on this whole series and his replies to everyone’s questions. He’s a natural teacher!

Avatar image for Martin Breuss

Martin Breuss RP Team on March 26, 2020

@Dave Wilson 😊 Thanks so much! Glad the series is helpful for you!

Avatar image for adrianaariza

adrianaariza on April 23, 2020

Hi Martin, when I add {% load static%} the html marks an error. It says unexpected tokens.

Avatar image for Martin Breuss

Martin Breuss RP Team on April 24, 2020

Hi @adrianaariza, is this a PyCharm error (something that PyCharm highlights for you) or is your webapp not working and displaying an error message when you try to run it?

If it’s the first, check out this question that I found when searching for this online. Does it solve your situation when you follow Pavel’s suggestion?

If it’s the second, please send some more info on what you are doing, where it’s breaking, and the relevant code and error message, and I can look some more. Hope that does it, though :)

Avatar image for rivet

rivet on May 26, 2020

Hello Martin. Thank you for the great course, I’m enjoying it and your careful explanations have helped my understanding. However, I’m using Django 3 which I think is newer than the version you’re using, and the documentation for FilePathField is different. It says:

A CharField whose choices are limited to the filenames in a certain directory on the filesystem.

… which sounds exactly what we need. I’m finding the Django documentation here really unhelpful. I know that’s not your fault, but could you describe in a bit more detail what FilePathField is supposed to be for, and why we can’t use it here? Kind thanks!

Avatar image for Martin Breuss

Martin Breuss RP Team on May 28, 2020

Hi @rivet and glad you’re enjoying the course :)

It is totally possible to use a FilePathField() for this example, as you can see in the supporting written tutorial. The part that might trip you up, however, is that this field requires the use of an absolute path:

FilePathField.path Required. The absolute filesystem path to a directory from which this FilePathField should get its choices. Example: “/home/images”.

There are, however, elegant ways to solve this by dynamically generating the path through a function when the app runs.

Tl;dr: FilePathField is a good choice for this situation. There are always multiple ways to solve a problem, and the main aim here was to show how you can follow an error and figure out a solution. Hope that makes sense :)

Avatar image for abaninarendra

abaninarendra on July 2, 2020

When I add load static in all_projects.html

{% load static %}

I get unexpected tokens for line

<!DOCTYPE html>

Avatar image for Martin Breuss

Martin Breuss RP Team on July 2, 2020

Hi @abaninarendra are you using the PyCharm Community Edition? From what I understand, it doesn’t support the Django integration in their free version, which is why this highlight may show up. This is just some IDE-internal notification and shouldn’t impact the functionality of your project, however. Let me know if that’s not the case.

If you are using the Professional PyCharm version and this error is still showing up, you can read up on Activating the Django Integration. Hope this helps!

Avatar image for tomislavm021

tomislavm021 on July 20, 2020

Why whould anyone use shell to upload images into app? I still dont understand how to show images :/

Avatar image for Martin Breuss

Martin Breuss RP Team on July 21, 2020

Hi @tomislavm021 - you’re not uploading the images to your app using the CLI, you are just adding the path to where your images are stored through the command line.

In terms of images, think of your app like a file system. The images live somewhere in a folder. In order to link to them from a different place, you need to tell your app where they are located. Their location is also called their “path”.

What you need to give to Django in order to correctly display the images that you have already put into your app’s ~file system earlier on, is this path of each file. That’s what you’re adding through the CLI, and it’s just some text, not the actual image.

Does this help to clarify things?

Avatar image for iwatts

iwatts on Sept. 22, 2020

Hi - Just in case anyone else is having the same problem:

  • Problem: I have run the migrations which all seemed to work succesfully but when I open up the database in the Database Viewer (Professional Edition) there is no schema or anything - just completely empty
  • Solution: When I clicked on Data Source Properties it told me I had missing drivers - once I installed them and refreshed everything appeared

Hope that helps someone.

Avatar image for Andy Pickett

Andy Pickett on March 18, 2021

"GET /static/option.image HTTP/1.1" 404 1662

This error just consumed an hour of my life but also taught me to be careful where I use quotation marks. I am building my first web app having watched the tutorials and made notes. I must have just missread and I enclosed my equivialnt of project.image in ''.

<img src="{% static 'option.image' %}" alt="screenshot of page">

when it should have been:

<img src="{% static option.image %}" alt="screenshot of page">

I got so hung up on the idea that my file structure was correct I couldnt see that the file path (at the top of this comment) was actually displaying the path it was checking and not just showing option.image in place of the path it represents. Silly me! Hope someone else finds this by searching that error code. Google did not help me this time!

Avatar image for Thomas J Foolery

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?

Avatar image for Thomas J Foolery

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.

Avatar image for Martin Breuss

Martin Breuss RP Team on April 20, 2021

Hi @Thomas J Foolery. What did you try to do to display your images? Did you:

  • follow the steps outlined in this video
  • hardcode the file path to double-check that the image appears
  • change the FilePathField to a CharField as described in Debugging Part 2
  • make and apply the migrations
  • update the database entries for each image to the full path

Related 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!

Avatar image for Thomas J Foolery

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.

Avatar image for ludwigmatse

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.

Avatar image for Martin Breuss

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

Avatar image for bgersten

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.

Avatar image for Martin Breuss

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 🤔

Avatar image for bgersten

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?

Avatar image for Martin Breuss

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.