Forums

I'm new to PythonAnywhere and fairly new to Python and DJango. I have a sample app which I have managed to publish through PythonAnywhere and it is functional. The issue is that a static image as well as some other images linked to rows in a database table are not showing up.

I've gone through all of the recommended steps to debug issues with static files and is seems like the logo image should be appearing. Here is the HTML for that section of the template.

        <a class="navbar-brand" href="{% url 'home' %}">
      {% load static %}
      <img src="{% static 'images/movie.png' %}" alt="" width="30" height="24"
        class="d-inline-block align-text-top" />
      Movies
    </a>

The file images/movie.png is in the physical path myproject/moviereviews/static/images folder.

The other template where I am seeing not found is with the following html.

 <img class="card-img-top" src="{{ movie.image.url }}" alt="Movie">

I've checked and each image file is in the images folder.

Is this a static file issue or is it an issue with images in general? I also noticed that when I to go the Admin section, it is functional, but the CSS is not applied. Also, I did install pillow using pip when the site was setup and did not see any errors, so I do believe that was installed correctly. Maybe there's a way to confirm this??

If anyone has some tips on what I can do to debug this, I'd appreciate it. As I said, I've already triple and quadruple-checked the static files setup, both through the text I used to create the sample application as well as the help documents I found on pythonanywhere.

Thanks in advance for your help! Bob

Right now it looks like you have a static file mapping from "/static" to "/home/pythonhillberg/moviereviews/static/images/movie.png". That would map all requests for all URLs starting with "/static" to that file -- and because Unix paths are case-sensitive, and your username is "PythonHillberg" rather than "pythonhillberg", that file does not exist.

What I think you need (I'd need to see your files to be sure) is a mapping from the URL "/static" to the directory "/home/PythonHillberg/moviereviews/static/". Then, a request for (say) https://PythonHillberg.pythonanywhere.com/static/images/movie.png would go to the file "/home/PythonHillberg/moviereviews/static/images/movie.png`, which I think is what you want.

Also, for Django, you should use the "collectstatic" command to get (for example) the admin CSS into the right place. This help page should be useful for that.

Thanks for the reply. That definitely helped. Changing the setting in the Web tab to PythonHillberg did the trick for both the website logo as well as the CSS for the Administration section.

Now, the only issue I have is that the images from the database are not coming up, but they are definitely there.

Here is an excerpt of the page source where an image is to be shown.

            <div v-for="movie in movies" class="col">
            <div class="card">
                <img class="card-img-top" src="/movie/images/HarryPotter.jpg" alt="Movie">
                <div class="card-body">
                    <a href="/movie/4">
                        <h5 class="card-title fw-bold">Harry Potter</h5>
                    </a>
                    <p class="card-text">Harry Potter is a movie based on the hugely popular book series by J.K. Rowling</p>
                </div>

            </div>
        </div>

Here is the folder name:

/home/PythonHillberg/moviereviews/movie/images

The file HarryPotter.jpg is in this folder.

Any ideas on why these images would not be appearing correctly?

Thanks again!

What is the full url being requested?

Here is the code in the HTML Template.

        {% for movie in movies %}
        <div v-for="movie in movies" class="col">
            <div class="card">
                <img class="card-img-top" src="{{ movie.image.url }}" alt="Movie">
                <div class="card-body">
                    <a href="{% url 'detail' movie.id %}">
                        <h5 class="card-title fw-bold">{{ movie.title }}</h5>
                    </a>
                    <p class="card-text">{{ movie.description }}</p>
                </div>
                {% if movie.url %}
                <a href="{{ move.url }}" class="btn btn-primary">Movie Link</a>
                {% endif %}
            </div>
        </div>
    {% endfor %}

We need an example full url to check. https://something.domain.foo/some/path/to/some/image

http://pythonhillberg.pythonanywhere.com

http://pythonhillberg.pythonanywhere.com/movie/2

Not sure if this is what you are looking for.

Here is the resulting page source.

        <div class="col-md-4">
            <img src="/movie/images/Gladiator.jpg" class="img-fluid rounded-start" alt="">
        </div>

The url requesterd there is http://pythonhillberg.pythonanywhere.com/movie/images/quietman_vUZKXQt.jpg and there is no /static/ in it so it is not covered by your static file mapping.

Okay, so you're saying that the image files, whose names are stored in the DB need to have their path identified as static?

How would I change this line in the template to accommodate the static declaration.

<img class="card-img-top" src="{{ movie.image.url }}" alt="Movie">

so that it matches this...

<img src="{% static 'images/movie.png' %}" alt="" width="30" height="24"
        class="d-inline-block align-text-top" />

The movie.image.url is replaced with the actual file name, so somehow I would need to change the path to a static path?

Also, how would the static file declaration be created? I'm assuming it would be something like this?

/home/PythonHillberg/moviereviews/movie/images

You do not need to "identify a path as static", so you can still use your first example to serve the file. You do, however, need to use the correct URL for the file. See https://help.pythonanywhere.com/pages/DebuggingStaticFiles/ for details on how to work out the correct URL. You will also need to serve the static files that are on the disk: https://help.pythonanywhere.com/pages/DjangoStaticFiles/

Okay, I've been looking through those links for about an hour now and still can't figure this out. I'm unclear on your first point where you say I don't need to change the first example.

Do you mean that this code is okay?

<img class="card-img-top" src="{{ movie.image.url }}" alt="Movie">

When you say, use the correct URL for the file, again I'm not sure I'm following. Based on "inspecting" the resulting HTML in the browser, it ls looking for the file in the movie/images/ folder, so from the website root, /movies/images. All of the required image files are in that folder.

Just throwing stuff against the wall, I tried adding this static entry in the Web tab.

URL/static/movie/ Directory/home/PythonHillberg/moviereviews/movie

However, I'm assuming I would need to {%load static %} and use {% static %} in the image url, but I thought you said that I didn't have to change the code.

Sorry again....totally confused!

The static files config on the web app page is different from the django static files config. They're two ways of doing the same thing.

https://docs.djangoproject.com/en/5.0/howto/static-files/ https://help.pythonanywhere.com/pages/StaticFiles/

This is all still very confusing. I apologize, I really am a dinosaur trying to roam the modern streets!!

If I hardcode an image, for example

src="{% static 'movie/images/Gladiator.jpg' %}"

It works correctly, but every image is hardcoded.

However, if I try to substitute the hardcoded image with the value stored in the DB like this...

src="{% static '{{movie.image.url}}' %}"

I get this Url when inspecting the item.

http://pythonhillberg.pythonanywhere.com/static/%7B%7Bmovie.image.url%7D%7D

Obviously, the syntax is not correct, here, but how can have replace the actual image name with the value stored in the DB while prefixing it with the static folder name?

Just to make sure I understand what you're trying to do there -- you have a Django object that you're retrieved from the database and passed in to the template as movie. It has a field that is image, and on there there is a field url. Is that right? If so, what is the value in movie.image.url? Is it just (say) 'movie/images/Gladiator.jpg'? If so, and all you're trying to do with the static keyword is to add /static to the start, then I think you would need to do this:

src="{% get_static_prefix %}{{movie.image.url}}"

That worked. Thanks Giles!!!

I never would have found that. I searched on get_static in all of the links provided above and this syntax was not found in any of them. All is working now!

Thanks again.

No problem, glad we got there in the end :-)