How to show Images in Bootsfaces Datatable columns

Question

I need to show images dynamically in a data table column, I have the images in a local folder, how can I do that in Bootsfaces data table?

Thanks for any help!

in jsf you can put the images in the src/webapp/resources//images folder. if you need to get them from elsewhere on the file system you will need to use a servlet or managedbean — MitchBroadhead, Mar 22 '18 at 09:28
Possible duplicate of [Load images from outside of webapps / webcontext / deploy folder using or tag](https://stackoverflow.com/questions/4543936/load-images-from-outside-of-webapps-webcontext-deploy-folder-using-hgraphi) — Jasper de Vries, Mar 22 '18 at 09:35
Hello guys thank you very much for the time... yes I'm able to use images outside of the datatable, the problem is inside the datatable because I need to show a diferent image for each row. The problem is showing the images in the datatable using Bootsfaces (b:dataTableColumn) I don't want to have to change to primefaces or another. Any idea??? Thank you very Much again!!! — Osvaldo D., Mar 22 '18 at 21:15

score 2 · Answer 1 · edited Apr 03 '18 at 08:26

Simply nesting an HTML img tag in a b:dataTableColumn does the trick:

   <b:dataTable value="#{carPool.carPool}" var="car" class="editableCarTable">
      <b:dataTableColumn value="#{car.brand}" />
      <b:dataTableColumn label="Image">
        <img src="https://www.example.com/some.png" />
      </b:dataTableColumn>
    </b:dataTable>

You've mentioned the images are stored in a local folder. You'll have to make these images accessible to the web server. Usually, I do so by copying the images to src/main/webapp/images. Once the images are there, they've got a URL, so you can display them using this URL.

To make the image row-specific, put the URL into the row bean, so you can access it like so:

   <b:dataTable value="#{carPool.carPool}" var="car" class="editableCarTable">
      <b:dataTableColumn value="#{car.brand}" />
      <b:dataTableColumn label="Image">
        <img src="#{car.rowSpecificURL()}" />
      </b:dataTableColumn>
    </b:dataTable>

Of course, you can also use h:graphicImage or b:image. Both allow you to benefit from the resources folder Mitch mentioned above in the comment. The BootsFaces b:image also supports things like tooltips, a progress bar, and so on.

How to show Images in Bootsfaces Datatable columns

1 Answers1