How to show image in container

How to show image in container

  

I want to set an image in container with css

background-image:url("path");

My image is stored in database as binary. So how to get the url so that I can set that in path? 

### HTML ###


    <div id="container">
        <div class="image-container">
            <img src="#" alt="A image" />
        </div>
    </div>


    ### CSS ###

    #container {
        width: 130px;
        height: 60px;
        display: table;
        background-color: #ccc;         
    }

    #container .image-container {
        text-align: center;
        vertical-align: middle;
        display: table-cell;
    }

    #container .image-container img {
        max-width: 160px;
        max-height: 60px;        
    }

Hi,

You can use Image Widget inside the container and then assign Image source to Image binary.

Hi Lovish,

You can also create a REST service that receives the Record Id (i.e Image.Id) and returns a binary content. 

Inside you just query the entity that has the binary and assign the output parameter with the binary content.

On your CSS, you should do something like:

background-image:url('"/<Espace>/rest/<restname>/<restservicename>/ImageId"+Image.Id+"');"


Hope it helps