Grails: Displaying Created Image in Gsp

Grails: displaying created image in gsp

If you write the bytes to the output stream, you can treat the controller/action as the source of the image in your GSP. Here's a quick, untested example:

// controller action
def displayGraph = {
    def img // byte array
    //...
    response.setHeader('Content-length', img.length)
    response.contentType = 'image/png' // or the appropriate image content type
    response.outputStream << img
    response.outputStream.flush()
}

You could then access your image in the src of an <img> tag like this:

<img src="${createLink(controller: 'myController', action: 'displayGraph')}"/>

Update:

After reading your question again, this may or may not work - it looks like you might be displaying the graph as the result of a form submission. This will only work if you're storing the state on the server somewhere (instead of just getting it from the one request where the form is submitted). If you do store enough state on the server to generate the graph, then you'd have to provide some additional parameters to your controller to get the correct image, e.g. src="${g.link(controller: 'myController', action: 'displayGraph', params: ['id': 1234])}", where id is how you retrieve the graph state.

How to display image in grails GSP?

As it is a Set, if you want the first element, you will have to go:

profileInstance.photos.toArray()[0].id

or

profileInstance.photos.iterator().next()

Displaying image in GSP (Grails), get link from database

The proper syntax to avoid a syntax errors would be:

<img src="${resource(dir:'images', file:fieldValue(bean:productInstance, field:'image'))}" />

But I recommend you write your own tagLib, because it is really very simple to write one and your GSPs will look much nicer if you are going to use this code a lot. You could easily write a tag that would be called something like:
<product:image product='productInstance' /> and for extra usability you could make the tagLib output the link as well.

The simplicity of writing tagLibs is really one of the best grails features in my opinion.

Displaying images in gsp(grails)

If your imageList has list of image objects try the following

${createLinkTo(dir: 'images', file: image.filename)}.

If your imageList like this['1.jpg','2.jpg','3.jpg'] try the following

**${createLinkTo(dir: 'images', file: image)}**

Display Image in gsp generated from class

Use backward slash rather than forward slash, like:

Action:

def test() {
    String val = "<img src=\"http://localhost:8080/formwizard/images/asd.png\" alt=\"sometext\">"
    [val: val]
}

View:

<script>
    $(document).ready(function () {
        $("#divId").html('${val}');
    });
</script>
<div id="divId"></div>

Note:- If you are use the "(
String val = "<img src=\"http://localhost:8080/formwizard/images/asd.png\" alt=\"sometext\">") in action val string then use '('${val}') in scriptto get it and if use '("<img src='http://localhost:8080/formwizard/images/asd.png' alt='sometext'>") then use "${val}" in script.

If you are using ajax then

Action:

def test2() {
    String val = "<img src=\"http://localhost:8080/formwizard/images/asd.png\" alt=\"sometext\">"
    render val
}

View:

<script>
  function getImg() {
    $.ajax({
      url: "${createLink(controller: 'dashboard', action: 'test2')}",
      success: function (data) {
        $("#divId").html(data);
      }
    });
  }
</script>
<a href="javascript:void(0)" onclick="getImg()">Get Image</a>
<div id="divId"></div>

---

EDIT......................................................................

Change your code to:

def grailsLinkGenerator
def test2() {
    def basePath = grailsLinkGenerator.serverBaseURL
    String val = "<td><a href='adddd'><img width=\"50\" height=\"50\" src=" + basePath + "/images/repository/HrCrEmp/PIC_/0004-001.png alt=\"Fawkner Park\"></a></td>";
    render val
}

NOTE:- Works fine if image extension is png and if image extension is jpg then remove hyphen(-) sign from image name.

Grails 2.5.11 / Postgresql 10, Upload Image and Display in GSP

What is Cars.id in your case? Maybe it is an array of cars and you need to iterate over it?

<g:each in="${Cars.list()}" var="car">
 <img src="${createLink(controller: 'garage', action: 'getImage', params: ['id': car.id])}"/>
</g:each>

EDIT 1:

Based on your responses I create a sample grails(2.5.6) project.

Domain:

class Car {
    String name
    byte[] photo

    static constraints = {
        photo maxSize: 1024 * 1024 * 2
    }
}

In Controller I have 2 methods:

def show(Car carInstance) {
    respond carInstance
}

def showImage(int id) {
    def item = Car.get(id)

    byte[] imageInByte = item.photo

    response.contentType = 'image/png'
    response.outputStream << imageInByte
    response.outputStream.flush()
}

And gsp page with:

<g:fieldValue bean="${carInstance}" field="name"/>
<img src="${createLink(controller: 'Car', action: 'showImage', params: [id: carInstance.id])}"/>

And image was rendered successfully.

EDIT 2:

Sorry, I miss what you try to do it with multiple images.

First of all you need to create additional Domain to store photos:

class CarPhoto {
    byte[] photo

    static belongsTo = [car: Car]

    static constraints = {
        photo maxSize: 1024 * 1024 * 2
    }
}

and add this dependencies to Car Domain:

class Car {
    String name
    static hasMany = [photos: CarPhoto]

    static constraints = {}
}

After that you need to apply those changes to showImage action:

def showImage(long id, long photo_id) {
    def car = Car.get(id)
    def photo = CarPhoto.findByCarAndId(car, photo_id)

    byte[] imageInByte = photo.photo

    response.contentType = 'image/png'
    response.outputStream << imageInByte
    response.outputStream.flush()
}

And to the gsp page:

<g:each in="${carInstance.photos}" var="photo">
    <img src="${createLink(controller: 'Car', action: 'showImage', params: [id: carInstance.id, photo_id: photo.id])}"/>
</g:each>

Also you need to change your upload methods. You can find info here.

how to display images in Grails?

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?

---

Related Topics