how to display images in Grails?

Question

I am trying to render the images from /WEB-INF/images/sps in the GSP page using the following code:

def index = {
    def baseFolder = grailsAttributes.getApplicationContext().getResource("/").getFile().toString()
    println baseFolder
    def imagesFolder = baseFolder + '/images/sps'
    println imagesFolder
    def imageList1 = new File(imagesFolder).list()
    println imageList1
    def imageList = Arrays.asList(imageList1)       
    println imageList
    imageList
    //redirect(action:"displayImages", params:["imageList":imageList])
    //render(view:"displayImages")
}

The controller is able to read the images from the fileSystem. But when I try to display them using the following code, the images are not coming.

index.gsp

<g:each in="${imageList}" var="image">
   <img src="${resource(dir: 'images', file: image.filename)}" alt="Grails"/>
</g:each>

What mistake am I doing?

EDIT :

When I try with single image, it is working fine - I am able to view the image that is in the WEB-INF/images folder

<img src="${resource(dir: 'images', file: '1.jpg')}" alt="Grails"/>

And there is no HTML code thats getting generated for the loop code(above index.gsp code). Its just blank.

My requirement is to display all the image files that are on the file system folder.

Answer 1

It was simpler. You should return a model from an action as a Map: [imageList: imageList] for imageList to be available by name in GSP.

And yes, can you move images folder to web-app - is it OK that all the world can request your images via HTTP?

Answer 2

you are returning a list of File objects, where you will call the toString method of the file object which most likely returns the absoute file path of the file object. this would give you something like this in the html source code

<img src="/app/images/c:\path\to\imagefile.png">

try calling

<img src="${resource(dir: 'images', file: image.name)}" alt="Grails"/>

and if that doesnt work, show us the html code that it produces.

---

In light of new knowledge, the above won't work. The return of File.list() is actually String[] where each string is a file name rather than a complete path.

Anyways, getting a look at the html source would shed light on what exactly gets printed out.

I suspect that maybe g:each doesn't support iterating over simple array types like String[], you could try converting it to a List.

def imageList = Arrays.asList(new File(imagesFolder).list())

---

Have you tried converting it to a list and using g:each with that?

why are you storing your images in WEB-INF/images? why not just images? i think the code ${resource(dir:'images')} would point to the latter.

Answer 3

You can't render images that are located under WEB-INF using the standard image tag. The images aren't web accessible. You'll need another controller that will stream the images back to the view for you. So something like this:

class AvatarController {

  def show = {

    def userInstance = User.get(params.id)
    def avatarFilePath = new File(userInstance.avatarURL)
    response.setContentType("application/png")
    response.setContentLength(avatarFilePath.size().toInteger())
    OutputStream out = response.getOutputStream();
    out.write(avatarFilePath.bytes);
    out.close();
  }
}

And then to display this image:

<img src="/app/avatar/1234" />

I'll let you work out the conversion of this into your own needs. The key, however, is that you must stream the image back since it isn't web accessible in its current location.

You're better off just serving them outside of WEB-INF, however.

Answer 4

1. don't store data in WEB-INF, store your images in /web-app/images/

2. in your controller:

    def baseFolder = servletContext.getRealPath("/") def folder = baseFolder + '/images/' // web-app/images/ def imagesFolder = new File(folder) def files = imagesFolder.listFiles().toList() List<String> imageList = [] files.each { imageList.add(it as String) } return imageList

3 in your view:

   <g:each in="${imageList}" var="image">
       <img src="${resource(dir: 'images', file: image)}" alt="Grails"/>
    </g:each>