0

I am trying to display images that are upload by the user in my HTML. I'd set the following:

Settings: 

MEDIA_URL = '/media/'
MEDIAFILES_DIRS = []
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

Upload files within the model to directory: 

class Artikel(models.Model):
    artikel_pic = models.ImageField(upload_to='assortiment/images/', blank=True, verbose_name="Afbeelding")

urls: 

urlpatterns = [
    path(r'', include('main.urls')),
    path(r'', include('assortiment.urls')),
    path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Views.py: 

class AssortimentView(TemplateView):
    template_name = "assortiment/assortiment.html"

    def get(self, request):
        artikel = Artikel.objects.all()
        context_artikel = { 'artikel': artikel}
        return render (request, self.template_name, context_artikel)

url that is given when i open the image in the admin panel: http://127.0.0.1:8000/media/assortiment/images/choco_ijs.jpg It displays correctly over here.

html code that needs to diplay the image: 

    {% for art in artikel %}
      <div class="col-sm-2">
        <div class="card" >
          <img class="card-img-top" src="{{MEDIA_URL}}/images{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
          <div class="card-body">
            <h5>{{ art.artikel_naam }}</h5>
            <p class="card-text">{{ art.artikel_omschrijving }}</p>
          </div>
            <div class="row mr-auto">
                <div class="col-8">
                  <button type="submit" href="#" class="btn btn-info" id="button-assortiment-info">info </button>
                </div>
                <div class="col-4">
                  <button type="submit" href="#" class="btn btn-primary" id="button-assortiment-add">+</button>
                </div>
            </div>
        </div>
      </div>
    {% endfor %}

I get a not found (304) error: "GET /media/assortiment/images/choco_ijs.jpg HTTP/1.1" 304

It looks like everything is going fine. Can't figure out what is going wrong though. I tried to change the src within the html file to: 

<img class="card-img-top" src="{{ artikel_pic }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="/images/{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{MEDIA_URL}}{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">

It seems like the source is not routing to the right one. Does anyone have some suggestions how to do this correctly?

Dharman
  • 30,962
  • 25
  • 85
  • 135
Rick
  • 211
  • 4
  • 11
  • HTTP 304 is _not_ Not Found, that is 404. 304 means the browser already has the file cached, which is fine. It seems like you're getting the cached file (are you replacing a file?). You might need to just clear the cache in your developer tools or hard reload (shift+reload). – Tom Carrick May 02 '20 at 17:41
  • Excuse me, type error in the above text: 404 error it is. Tried to hard reload it several times but it is not working. – Rick May 02 '20 at 18:13
  • It seems like it is not redirecting to the right path to display the image. Tried to relocate the image folder to the app/media/images/picture.url but it is not working either. – Rick May 02 '20 at 18:29
  • 1) 304 != 404 2) there is no `MEDIAFILES_DIRS` option 3) `src="{{ artikel_pic.url }}"` is the right one, however it could be that `artikel_pic` contains something different from an image field value because `{{MEDIA_URL}}/images/{{ artikel_pic.url }}` would result in a different URL, not what you shown in the question. Please show your view code. – Ivan Starostin May 02 '20 at 18:31
  • views.py added in the question above: – Rick May 02 '20 at 18:47
  • So, the view populates template with a list of articles, not single instance. Please show corresponding template part which iterates through this list. It is still unclear which code produces your problematic page. – Ivan Starostin May 02 '20 at 18:51
  • added the full html part that iterates over the artikel items – Rick May 02 '20 at 18:55
  • `artikel_pic` is always `None` (not initialized variable), please try `src="{{ art.artikel_pic.url }}"`. If "does not work" - please grab generated URL from rendered page ("view source", "inspect element"), open this URL manually and share response HTTP status or error message. – Ivan Starostin May 02 '20 at 19:08
  • Exception Value: The 'artikel_pic' attribute has no file associated with it. – Rick May 02 '20 at 19:18
  • Which means that some of articles do not have pictures. This can be checked with `{% if art.artikel_pic %} ... {% endif %}` around ``. – Ivan Starostin May 02 '20 at 19:27

1 Answers1

0

add these lines in settings.py file

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

and use this code in html file 

<img class="card-img-top" src="{{ art.artikel_pic.url }}">
Praveen
  • 97
  • 4