# Question about images

**URL:** <https://forum.servoy.com/t/question-about-images/12001>\
**Category:** Classic Servoy\
**Created:** [April 6, 2010, 7:37pm UTC](https://forum.servoy.com/t/question-about-images/12001 "2010-04-06T19:37:28Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 6, 2010, 7:37pm UTC](https://forum.servoy.com/t/question-about-images/12001/1 "2010-04-06T19:37:28Z")

</div>

Im having a problem with images.  
The thing is that im storing in my database the path to images instead of the images themselves. And now i want to show those images on a list view i have but im not sure of how to do it.  
I thought of a calc that returns the image so i could show it on an image media field but or im doing it wrong or thats just not what i need to do.  
I tryied using the plugins.image.getImage(url) method but its not working  
Any ideas or recomendations??

thanks in advance

---

<div class="post-metadata">

**Author:** ![Roberto\_Blasco](https://avatars.discourse-cdn.com/v4/letter/r/5f8ce5/32.png) [@Roberto\_Blasco](https://forum.servoy.com/u/Roberto_Blasco)\
**Post date:** [April 6, 2010, 8:13pm UTC](https://forum.servoy.com/t/question-about-images/12001/2 "2010-04-06T20:13:22Z")

</div>

Hi **nromeou**.

You can show in the list view html\_fields instead edit\_fields. The html field should be somehing like this

```auto
html = "<html><body>";
html = html + "<img src='" + url_image + "'/>";
html = html + "</body></html>";

```

where **html** is the databaseprovider and **img\_src** takes the value of each ot the images you want to show.

Another way to do it is inserting all the image urls into a table

```auto
var num_reg; // Number of images to show

html = "<html><body><table width='100%' border='0'>";
for (var x = 1; x <= num_reg; x++){
html = html + "<tr><td><img src='" + url_image + "'/></td></tr>";
}
html = html + "</table></body></html>";

```

and just show the table into a html\_field inside a form (record view)

Best regards. Roberto.

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 6, 2010, 8:33pm UTC](https://forum.servoy.com/t/question-about-images/12001/3 "2010-04-06T20:33:42Z")

</div>

Roberto, thanks for replying but still not working :S  
heres my calc

```auto
function display()
{
	var html = "<html><body>";
	html = html + "<img src='" + url + "'/>";
	html = html + "</body></html>";
	return html
}

```

(url is the variable that contains the path to the image, for example C:\Documents and Settings\nromeou\Mis documentos\Mis imágenes\axtrioCancel14.JPG)  
I set that calc as my html\_field dataprovider but im seeing a red cross like if there was no image or like it cant be shown…  
any ideas?

---

<div class="post-metadata">

**Author:** ![Roberto\_Blasco](https://avatars.discourse-cdn.com/v4/letter/r/5f8ce5/32.png) [@Roberto\_Blasco](https://forum.servoy.com/u/Roberto_Blasco)\
**Post date:** [April 6, 2010, 11:51pm UTC](https://forum.servoy.com/t/question-about-images/12001/4 "2010-04-06T23:51:14Z")

</div>

Hi **nromeou**

Here you’re an example.

Best regards. Roberto.

[temp1.servoy](https://forum.servoy.com/uploads/short-url/zyZmBJdpjfJ5HSPH2FS9LkRcxUW.servoy) (3.52 KB)

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 7, 2010, 5:25pm UTC](https://forum.servoy.com/t/question-about-images/12001/5 "2010-04-07T17:25:38Z")

</div>

Roberto are you sure this is the right example?  
Cause its a list view but… nothing to do with images or htmls fields… ![:?]( "Confused")

---

<div class="post-metadata">

**Author:** ![Roberto\_Blasco](https://avatars.discourse-cdn.com/v4/letter/r/5f8ce5/32.png) [@Roberto\_Blasco](https://forum.servoy.com/u/Roberto_Blasco)\
**Post date:** [April 7, 2010, 8:58pm UTC](https://forum.servoy.com/t/question-about-images/12001/6 "2010-04-07T20:58:24Z")

</div>

Hi **romeau** I tought you wanted to paint an html table with images embebbed into tags.

May be, what you need, is an example with a list view form and html fields in each row?

```auto
/ **********************************************
Code from temp1.servoy
********************************************** /

/**
 * @properties={typeid:35,uuid:"69A24195-D904-4630-AB24-7061B776AB9B"}
 */
var html = "";

/**
 * Callback method for when form is shown.
 *
 * @param {Boolean} firstShow form is shown first time after load
 * @param {JSEvent} event the event that triggered the action
 *
 * @properties={typeid:24,uuid:"EF291B1E-94D2-4842-9172-0A7D22B351BF"}
 */
function onShow(firstShow, event) {

	// The images are located in /servoy_installation/application_server/server/webapps/ROOT/images
	// where /servoy_installation/application_server/server/webapps/ROOT is application.getServerURL()

	html = "<html><body><table width='100%' border='1'>";
	html += "<tr><td><img src='" + application.getServerURL() + "/images/c1.gif" + "'/></tr></td>";
	html += "<tr><td><img src='" + application.getServerURL() + "/images/c2.gif" + "'/></tr></td>";
	html += "<tr><td><img src='" + application.getServerURL() + "/images/c3.gif" + "'/></tr></td>";
	html += "<tr><td><img src='" + application.getServerURL() + "/images/c4.gif" + "'/></tr></td>";
	html += "</table></body></html>";
}

```

Best regards. Roberto.

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 9, 2010, 6:09pm UTC](https://forum.servoy.com/t/question-about-images/12001/7 "2010-04-09T18:09:01Z")

</div>

Roberto  
Logre mostrar las imagenes en el campo html pero solo si estan en la carpeta media… se ve que solo me acepta como ruta “media:///nombre.extension” si intento pasarle otra ruta no me carga la imagen, alguna idea?

Now in english for others  
I managed to show pics but only those stored in my media folder, the only rute that is working is “media:///name.extension”  
If i want to show a pic stored for example in “C:/MyPics”, how do i do it? is there a specific way i should pass that route? idk like using “//” instead of “/” or something like that…

Thanks

---

<div class="post-metadata">

**Author:** ![Roberto\_Blasco](https://avatars.discourse-cdn.com/v4/letter/r/5f8ce5/32.png) [@Roberto\_Blasco](https://forum.servoy.com/u/Roberto_Blasco)\
**Post date:** [April 10, 2010, 12:50am UTC](https://forum.servoy.com/t/question-about-images/12001/8 "2010-04-10T00:50:46Z")

</div>

Hi nromeou.

Where are the pictures you want to show, on the server side or on the client side?

Best regards. Roberto.

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 12, 2010, 5:01pm UTC](https://forum.servoy.com/t/question-about-images/12001/9 "2010-04-12T17:01:20Z")

</div>

clientside  
The pics are stored on a folder, probably C:/Folder/Pics or F:/Folder/Pics (thats an example)

---

<div class="post-metadata">

**Author:** ![ptalbot](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/ptalbot/32/4952_2.png) [@ptalbot](https://forum.servoy.com/u/ptalbot)\
**Post date:** [April 12, 2010, 5:22pm UTC](https://forum.servoy.com/t/question-about-images/12001/10 "2010-04-12T17:22:53Z")

</div>

> nromeou:  
> clientside  
> The pics are stored on a folder, probably C:/Folder/Pics or F:/Folder/Pics (thats an example)

A URL pointing to a local path should be written:

```auto
file:///C:/Folder/Pics/image.png

```

where “file” is the protocol (just like “http” or “https” or “ftp”…)

Also, make sure that the client have read property on this path.

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 12, 2010, 6:17pm UTC](https://forum.servoy.com/t/question-about-images/12001/11 "2010-04-12T18:17:02Z")

</div>

Thanks a lot patrick!!  
That was just what i was missing

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 12, 2010, 9:01pm UTC](https://forum.servoy.com/t/question-about-images/12001/12 "2010-04-12T21:01:22Z")

</div>

Patrick another question about this.  
Using what u said worked perfectly using the file system, now i want to do the same using http  
so what i wrote was ‘ ![]()’  
but it doesnt work, and seeing that if i access to [http://netnueva/HoytsNew/imagenes/Colinas%20azules.jpg](http://netnueva/HoytsNew/imagenes/Colinas%20azules.jpg) from my browser i get to see the image, i think im again with some format problem or something.  
How should this be written?

thanks

---

<div class="post-metadata">

**Author:** ![ptalbot](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/ptalbot/32/4952_2.png) [@ptalbot](https://forum.servoy.com/u/ptalbot)\
**Post date:** [April 12, 2010, 9:11pm UTC](https://forum.servoy.com/t/question-about-images/12001/13 "2010-04-12T21:11:04Z")

</div>

Why ‘ ![]()’ ???

Why not simply ‘’

‘http’ is a protocol, you don’t need to set it twice!  
Try typing ‘http:///[http://netnueva/HoytsNew/imagenes/Colinas](http://netnueva/HoytsNew/imagenes/Colinas) azules.jpg’ in your browser and I bet it won’t find your image either.

Hope this helps,

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 13, 2010, 5:34pm UTC](https://forum.servoy.com/t/question-about-images/12001/14 "2010-04-13T17:34:54Z")

</div>

I tryied that already and it didnt worked… any other idea?

---

<div class="post-metadata">

**Author:** ![ptalbot](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/ptalbot/32/4952_2.png) [@ptalbot](https://forum.servoy.com/u/ptalbot)\
**Post date:** [April 13, 2010, 5:57pm UTC](https://forum.servoy.com/t/question-about-images/12001/15 "2010-04-13T17:57:09Z")

</div>

> nromeou:  
> I tryied that already and it didnt worked… any other idea?

Note the %20 that replaces the space in your file name.  
A URL, to be valid, must also be URLEncoded, spaces are not valid, you can use either %20 or + instead of a space and no extended characters are valid, they must be replace by their hexadecimal counterpart. Google for URL encoding to know more about it.

---

<div class="post-metadata">

**Author:** ![nromeou](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@nromeou](https://forum.servoy.com/u/nromeou)\
**Post date:** [April 13, 2010, 7:23pm UTC](https://forum.servoy.com/t/question-about-images/12001/16 "2010-04-13T19:23:11Z")

</div>

hehe i figured it out, i had a problem before getting to the http thing  
that worked perfectly thanks a lot patrick ![:mrgreen:]( "Mr. Green")

---

<div class="post-metadata">

**Author:** ![martinh](https://avatars.discourse-cdn.com/v4/letter/m/848f3c/32.png) [@martinh](https://forum.servoy.com/u/martinh)\
**Post date:** [April 22, 2010, 10:34am UTC](https://forum.servoy.com/t/question-about-images/12001/17 "2010-04-22T10:34:13Z")

</div>

For this situation I’m not satisfied by the possibilities I have.

First I had images and documents stored in the database, but the database is growing huge because of those documents.  
So I’m going to store my documents on disc.

The above solution with and ![]() is working fine for images and these images must be stored somewhere under the %%SERVOYDIR%%\application\_server\server\webapps\ROOT  
directory.

And that is the problem. My Servoy directory is on the C disc and my documents are stored on the server somewhere on the D-disc.  
So when using the ![]() that is not working because this will look on the client D-disc.

And it is not just images that I want to show, but also PDF-documents and WORD-documents etc.

I don’t find some general solution to show the contents of a file that is stored on the server.

Any suggestions?

Martin

---

<div class="post-metadata">

**Author:** ![jcompagner](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/jcompagner/32/4889_2.png) [@jcompagner](https://forum.servoy.com/u/jcompagner)\
**Post date:** [April 22, 2010, 11:34am UTC](https://forum.servoy.com/t/question-about-images/12001/18 "2010-04-22T11:34:44Z")

</div>

make your own Servlet (written in java) that you run on the server side  
that you can ask for anything you want and the servlet knows how to get and stream it to you

then the urls are something like [http://hostname/yourservlet?document=x](http://hostname/yourservlet?document=x)

or use one of the streaming plugins that are already there, i guess they can do something like this for you already.

---

<div class="post-metadata">

**Author:** ![martinh](https://avatars.discourse-cdn.com/v4/letter/m/848f3c/32.png) [@martinh](https://forum.servoy.com/u/martinh)\
**Post date:** [April 22, 2010, 12:19pm UTC](https://forum.servoy.com/t/question-about-images/12001/19 "2010-04-22T12:19:12Z")

</div>

For images I have the following solution (but this works only for images)

```auto
	var _server = plugins.it2be_tools.server() // Use the IT2BE-tools to get a Server Object
	var _binary = _server.readFile(<path on server>) // Read the image on the server and put in binary variable
	var _tmp_file = plugins.file.createTempFile('', '.jpg') // Creates temp file on the client
	plugins.file.writeFile(_tmp_file, _binary) // Write the binary variable to the temporary file
	
	var _html = '<html><img src="file:///' + _tmp_file + '"/></html>' // Create html-block
	forms.myForm.local_html = _html // Put the HTML into a formvariable

```