CODEWITHSUNDEEP
pythondjango
Monk BR
Monk BR

Reputation: 21

Unable to Dynamically Render Django images on templates

So I've been trying to get the images uploaded through admin interface to render on a template but for some odd reason it just wont render the images. It renders any other type of data but NOT IMAGES.

From Settings.py:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

From appvew.py:

class ProjectsListView(ListView):
    model = Projects
    context_object_name = 'projects'
    template_name = 'myportfolio/portfolio.html'

appurls.py:

urlpatterns =[
    path('home/', views.ProjectsListView.as_view()),
    # path('projects/', )
]

html template:

  {% load static %}
  </head>
  <body>

    <h1><p>This is my portfolio</p></h1>
    
    {% for project in projects %}
    <img src="{{project.screenshot}}" alt="No image found">
    
    {% endfor %}
    
  </body>
</html>

Error message on the terminal:

Not Found: /portfolio/home/projects/images/shutterstock_253580635_square.jpg Not Found: /portfolio/home/projects/images/mountains.jpg [25/Mar/2022 14:16:06] ←[33m"GET /portfolio/home/projects/images/shutterstock_253580635_square.jpg HTTP/1.1" 404 2560←[0m [25/Mar/2022 14:16:06] ←[33m"GET /portfolio/home/projects/images/mountains.jpg HTTP/1.1" 404 2500←[0m

output :( :This is what the outut looks like

I verified an old project of mine with pretty much the same set up and it works. This one on the other hand, only renders the name of the objects on other properties but not the images

Upvotes: 0

Views: 34

Answers (1)

rahul.m
rahul.m

Reputation: 5854

Try this

<img src="{{project.screenshot.url}}" alt="No image found">

https://docs.djangoproject.com/en/4.0/topics/files/

Upvotes: 1

Related Questions