how to display images by using django-tables2

Question

I am new to Django-tables2, and I've searched around for this but haven't had much luck so looking for a bit of help. I am trying to display images in the cells of django-tables2; however, I only have the links to the images on my page and need to click the links and open new tabs to see the images. Here's what my code looks like now:

models.py   

class Item(models.Model):
    title = models.CharField(max_length=50)
    author = models.ForeignKey(Author, on_delete=models.SET_NULL, null=True)
    collection = models.ManyToManyField(Collection)
    url = models.URLField(max_length=200, null=True)
    date = models.DateField('Date Added', default=datetime.date.today)
    item = models.ImageField(upload_to='media/img', null=True)
    tag = models.CharField(max_length=100, null=True)

    class Meta:
        ordering = ["title", "date"]

    def __str__(self):
        return self.title


tables.py

class ImageColumn(tables.Column):
    def render(self, value):
        return mark_safe('<img src="/media/img/%s" />' % escape(value))

class ItemTable(tables.Table):
    image  = ImageColumn('item')

    class Meta:
        model = Item
        fields = ('id', 'item', 'title', 'author', 'collection', 'tag', 'date')
        template_name = 'django_tables2/bootstrap.html'

And on my webpage, it shows like this: enter image description here

It seems the image column doesn't do any help, but I have no clue how to do it. Any help is much appreciated.

I am not familiar with django-tables2, but with other table applications I have dealt with, you have to tell it the column should render HTML output, otherwise it strips html tags. In this case, it adds its own tags when it sees a link. — PoDuck, Jun 05 '18 at 15:13
In footables, for instance, you have to add the data-type `data-type="html"` to the cell in order for it to work. — PoDuck, Jun 05 '18 at 15:15

score 1 · Answer 1 · answered Jun 05 '18 at 15:25

1

Your approach seems good, but I think there is a small error somewhere. This is a simplified version from an actual use of django-tables2 with images:

from django.utils.html import format_html

class ImageColumn(tables.Column):
    def render(self, value):
        return format_html(
            '<img src="{url}" height="50px", width="50px">',
            url=value
        )

If it still doesn't work, inspect the HTML generated (context menu -> view source in your browser).

answered Jun 05 '18 at 15:25

Jieter

4,101
1
19
31

No, it doesn't work. Could you please be more specific how to inspect the HTML generated? – Fiona Xu Jun 05 '18 at 15:38
1

I suspect it's either the path to the image being wrong/incomplete, or too much escaping. Viewing the source: if you right click somewhere on the rendered page and click on 'view source' in the context menu. Usually a new tab is opened showing you the HTML source of your web page. Now you have to look for the part where the table is defined. If you still not see what's wrong, you can copy the tag here. My avatar here looks like this: `` – Jieter Jun 05 '18 at 19:06

score 1 · Answer 2 · answered Sep 06 '18 at 17:33

This is what I did as per the answer provided by @Jieter above and it worked.

tables.py

    class ImageColumn(tables.Column):
        def render(self, value):
            return format_html(
               '<img src="{url}" class="fav" height="20px", width="20px">',
                url=value
                )
    class DataTable(tables.Table):

        fav = ImageColumn()

And in my views.py I assigned the value to the image:

views.py

    data = []
    dt = {
          "fav": "/static/images/fav.png"
          }

    data.append(dt)

    return DataTable(data)

HTH

how to display images by using django-tables2

2 Answers2