-1

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.

Qudsia
  • 53
  • 8
  • It's been a while since I've set something up like this in a Django project, but two differences that I notice is that for one I don't use a '{% static 'home/img' as baseURL %}' line in my HTML and two, in my settings.py I would put 'django.contrib.staticfiles' in INSTALLED_APPS. Or maybe an obvious idea, but have you run: python manage.py collectstatic – Oxin Apr 02 '23 at 22:24
  • Thank you for suggestions. I do have django.contrib.staticfiles in INSTALLED block. I have run collectstatic twice. The same image in same static file is being fetched just fine with the non-dynamic statement, but not the dynamic one. The baseURL is needed to make the code dynamic. So any number of data records can be processed. How would you dynamically run the data? I think I have all pertinent info above.. and REALLY ANNOYED and SAD by people taking my points off when ask a question :( – Qudsia Apr 03 '23 at 22:06

1 Answers1

0

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).

Qudsia
  • 53
  • 8