For Django project (using VS Code), dynamic images not loading. Possible issue with baseURL

Question:

I’ve started a Django project based off of a (Telusko/Travello) tutorial but using my own files.

There’s data defined on Views.py for title, description, images for courses. It should populate containers in a row on homepage. Everything is getting populated but the images are not coming up with this code:

```<img src="{{ baseURL }}/{{ course.image }}" alt="Course Pic" class="img-fluid"/>```

But in the same code I tested using static image and that image shows. I tried different images including same one as in dynamic code. All work in static version. But weirdly for static code the "alt" tag is what I have for dynamic. Here’s the full loop:

```
{% for course in courses %}

                                <div class="col-md-3 bg-aqua">
                            

                                    <div class="p-1">
                                        <img src="{{ baseURL }}/{{ course.image }}" alt="Course Pic" class="img-fluid"/>

                                        {% if forloop.counter == 2 %}
                                        <img src="{% static 'home/img/Dalle1.jpg' %}" alt="Testing" class="img-fluid" />
                                        {% endif %}
                                    </div>
                                
                                    <div class="fs-3">
                                        <span> {{ course.name }} </span>
                                    </div>

                                    <div>
                                        <span> {{ course.description }} </span><br/>
                                        <span> Start Course-1 $ {{ course.price }} </span><br/>
                                    </div>
                                    
                                </div>
{% endfor %}
```

The if/endif is what I added to test the static link and the image populates in 2nd column as expected (except ‘alt’ caption is from dynamic code, which seems bizarre)

![Browser image of what this shows as:] (https://tinypic.host/i/course-row-images-example.2M6ou)

It seems something not working with baseURL which is defined as this on home.html:

{% extends "base.html" %}
{% load static %}
{% static 'home/img' as baseURL %}

(images are in static/home/img. Static is just under project)

This is what I have on settings.py for static file:

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
STATIC_ROOT =os.path.join(BASE_DIR, 'assets')

(Previously I had Staticfiles_dirs set as below but changed based on someone’s suggestion… working both ways, but neither helps with image issue:

```STATICFILES_DIRS = [os.path.join(BASE_DIR / 'static'),]```

This is the views.py


    from datetime import datetime
    from django.shortcuts import render
    from .models import Courses_All
    from django.http import HttpResponse
    
    # Create your views here. All showing fine except images.
    
    def home(request):
        
        course1 = Courses_All()
        course1.name = 'English Translation'
        course1.description = 'Wonderful easy learning'
        course1.image = 'Dalle1.jpg'
        course1.price = 700
        
        course2 = Courses_All()
        course2.name = 'English Stopping Rules'
        course2.description = 'Nice easy learning'
        course2.image = 'Dalle1.jpg'
        course2.price = 100
        
        course3 = Courses_All()
        course3.name = 'English Recitation'
        course3.description = 'Beautiful easy learning'
        course3.image = 'Dalle_1 (test).jpg'
        course3.price = 400
        
        courses =[course1, course2, course3]
        
        return render(request, 'home.html', { 'courses': courses})
                        

In browser, when I right click and select ‘view page source’, for the dynamic images, this is what shows (for static full path shows):

```<img src="/Dalle1.jpg" alt="Course Pic" class="img-fluid"/>```

so is the baseURL portion not being recognized at all?

Please let me know if I should share any other info to solve this. I was doing this with a tutorial but I used latest Python and Django and didn’t borrow files.. was working till this point. Everything else on homepage including navbar, header etc shows fine.This row with courses sits below the header and below another row.

Asked By: Qudsia

||

Answers:

Found the answer to this question here:

Django: Insert image in a template whose path is dynamic

I modified the code to the following based on above post and it worked:

<img src="{% static 'home/img/' %}{{ course.image }}" alt="Course Pic" class="img-fluid"/>

So no need even for any baseURL variable (that was not working).

Answered By: Qudsia
Categories: questions Tags: , , , ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.