0

I'm creating a website for an e-sports team where I want the administrators to have the option in backoffice (django admin) to add their collaborating partners. The model is gonna have an image, a link and a description. I know this question is being asked a lot - but trust me I've looked and tried for hours, there must be some minor issue that's been interrupting me.

I can get all the objects to show, with working links and descriptions, but the image wont show up. I sat all day yesterday trying to fix stuff.

I've tried changing the MEDIA_ROOT and MEDIA_URL as well as using different strategies that I've scouted on the internet and here on StackOverflow. But I can't get it to work.

# My model (models.py)
class Partner(models.Model):
    """ Adds a partner with specific information """
    ...
    partner_image = models.ImageField(upload_to='partners/', blank=True, null=True)

# Urls (urls.py)
from django.urls import path
from django.conf import settings
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from . import views

urlpatterns = [
    path('', views.index, name='index'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()

# Appropriate settings (settings.py)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

# Pages (views.py)
def index(request):
    """ Home """
    news_list = Article.objects.filter(status='p') # only show published news
    about_page = About.objects.filter()[:1].get()
    partners = Partner.objects.all()

    return render(request, 'SVEC/index.html', {'news_list': news_list, 'about_page': about_page, 'partners': partners})

# My template (partners.html, a section within my index.html)
{% for partner in partners %}
            <div class="col-md-3 col-sm-6">
                <a href="{{ partner.website }}">
                    <img class="img-fluid d-block mx-auto img-opacity text-just" src="{{ partner.partner_image.url }}" alt=" " data-content="{{ partner.information }}" rel='popover' data-placement='bottom' data-original-title='{{ partner.name }}' data-trigger='hover'>
                </a>
            </div>
{% endfor %}

When inspecting the element on my web browser, the expected outcome is for each image to show along with their description (while hovering) and possibility to go to the website by clicking.

This is what shows when inspecting, but still no picture showing. Is it some issue with how static files and media files work differently in how they find the correct pathing?

src="/media/partners/msi.png"

UPDATE:

This is what my cmd says, to compare media files with static files:

[03/Jun/2019 12:27:23] "GET /media/partners/msi.png HTTP/1.1" 404 2117
[03/Jun/2019 12:27:23] "GET /static/img/portfolio/01-full.jpg HTTP/1.1" 200 52848

I know Django recognizes the pathing for static files, it might be something different regarding media files?

Ivan Starostin
  • 8,798
  • 5
  • 21
  • 39
Christian Dahlberg
  • 17
  • 1
  • DEBUG=True or False? Open the file URL manually - what status/error message do you receive? – Ivan Starostin Jun 03 '19 at 08:07
  • Everything else looks absolutely fine, if `DEBUG=True` it should work fine. – Astik Anand Jun 03 '19 at 08:08
  • `DEBUG=True` is already set. When i ctrl + click the {{ partner.partner_image.url }} in vscode, this is the error message: Unable to open '{{ partner.partner_image.url }}': Unable to read file (Error: File not found (c:\Users\\Lund\Projects\SplitVision\SplitVisionEC\SVEC\templates\SVEC\sections\{{ partner.partner_image.url }})). – Christian Dahlberg Jun 03 '19 at 10:16
  • The original (manually written) pathing for the images that gets stored is: C:\Users\Christian Dahlberg\Lund\Projects\SplitVision\SplitVisionEC\media\partners. So somethings probably wrong if you look my last comment. – Christian Dahlberg Jun 03 '19 at 10:18
  • `in vscode`? Start your django app server, open the page in a browser, right click, "View source", find the image, click the link. – Ivan Starostin Jun 03 '19 at 12:08
  • Oh sorry. I see the problem. The url is: http://localhost:8000/media/partners/msi.png, but if I change it to http://localhost:8000/svec/media/partners/msi.png (adding /svec/ before) the image shows. Can I just adjust my template to `src="svec/{{ partner.partner_image.url }}"` or is it a better workaround? Sorry I'm quite new to Django. Update: Hm, adding "svec" to the url gives the outcome as following: http://localhost:8000/svec/svec/media/partners/msi.png, ie a double '/svec/'. – Christian Dahlberg Jun 03 '19 at 12:22
  • Please update your question with this info and add absolute path to your file on drive. – Ivan Starostin Jun 03 '19 at 13:18
  • If your image url is a static url, then you should use it as such `src="{% static partner.partner_image.url %}"`. – Bloodmallet Jun 03 '19 at 13:27

0 Answers0