topic Re: Adding an Image in HTML doc using JavaScript in Alfresco in Alfresco Archive

Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 00:29:15 GMT

I have an image url defined in my javascript code as:var url = "http://127.0.0.1:8081/share/proxy/alfresco/api/node/content/'+urlStr.substring(4);I have to pass this as src attribute to an image:var content = "";content += "<img src=\"url\">";‍‍‍‍But this doesn't work. I also tried inserting i

Re: Adding an Image in HTML doc using JavaScript in Alfresco

rjohnson — Tue, 20 May 2014 03:06:17 GMT

What do you mean when you say "doesn't work"? What error do you get? What's in urlStr? Are you executing this inside or outside of Alfresco?

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 03:23:00 GMT

Hi Bob, if I copy paste the variable url in the browser, it gives me the right image document so the path is correct. I have even linked it using the javascript str.link() method. It doesn't work means I am not able to see the image when I insert it using html img src tag. I am writing this code in javascript, which executes as a rule when the documents in one of my folders are modified.

Thanks!

Re: Adding an Image in HTML doc using JavaScript in Alfresco

aaditvmajmudar — Tue, 20 May 2014 04:43:35 GMT

What exactly you are looking to do with image? Sending in mail OR something else?

The below code is used to render image from javascript.

var imageUrl = Alfresco.constants.PROXY_URI+"api/node/content/workspace/SpacesStore/"+{UUID of image content}+"/"+{Name of the image};
<img src="'+imageUrl+'?a=true" width = "65px" height = "35px"/>

Hope this helps.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 12:38:00 GMT

Hi Aadit, Thanks for your reply. I am just trying to display the image in my html document. I am passing the html content to the new file content. Some of it looks like this.


var boxwidth = document.properties["sc:price"];
content += "<body align=\"center\"><font face= \"Comic sans MS\">";
content += "<b>Retail Price: </b>" + price + "<br><br>";
content += "<img src=\"'+res+'?a=true\" width = \"65px\" height = \"35px\"/>";
newFile.content = content;
‍‍‍‍‍‍‍

So, I need to escape the double quotes while passing it to the content string.
I tried your code but still the image isn't getting displayed. Is my syntax wrong somewhere? I passed the url as you had mentioned.
I greatly appreciate your help.
Thanks!

Re: Adding an Image in HTML doc using JavaScript in Alfresco

rjohnson — Tue, 20 May 2014 13:00:10 GMT

If you append ?a=true that tells the content webscript to attach the content as a file to download. Miss that off and it should give you a content stream (it does for me).

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 13:30:14 GMT

Hi Bob, I tried exactly this:


content += "<img src=\"'+res+'\" width = \"65px\" height = \"35px\"/>";
‍‍‍

Still, I am not able to see the image.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

rjohnson — Tue, 20 May 2014 14:08:25 GMT

Can you post the contents of res?

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 14:39:15 GMT

Here is the content of res:


var urlStr = document.assocs["sc:relatedDocuments"][0].url;
var res = "http://127.0.0.1:8081/share/proxy/alfresco/api/node/content/'+urlStr.substring(4);
content += "<img src=\"'+res+'\" width = \"65px\" height = \"35px\"/>";
‍‍‍‍‍

It works when I use it in link as:


var str = "View Image";
var result = str.link(res);
content += result+"<br><br>";
‍‍‍‍‍

Thanks again for looking into it.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

rjohnson — Tue, 20 May 2014 21:03:04 GMT

I am still less than certain what res actually contains at point of use, but it should look something like

http://127.0.0.1:8081/share/proxy/alfresco/api/node/content/workspace/SpacesStore/88265db1-371c-4ad2-a8de-94ffb2840216

the GUID bit at the end will of course be different.

It doesn't look like that's what you will end up with but I may be wrong.

Also you are going to localhost on a non standard port for Alfresco so I assume your browser is running on the same machine as your Alfresco installation and the you have explicitly assigned alfresco to 8081 away from 8080.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Tue, 20 May 2014 21:23:13 GMT

The url path is correct as I could make a hyperlink with it and that works fine. My port is 8081 configured as I am running using the alfresco development environment. I think there is some issue with passing a string to JavaScript. It takes the string literally rather than replacing it with the actual contents of the string. Also, I tried creating img tag using document.createElement("img"); but the error log says cannot find createElement(). Any suggestions on a workaround this problem. Thanks a lot!

Re: Adding an Image in HTML doc using JavaScript in Alfresco

aaditvmajmudar — Wed, 21 May 2014 06:29:00 GMT

I am not sure if I have understood correctly or not but as per my understanding if you are facing some problem to render image with javascript then I had same requirement to display image in div element from javascript and I have used in same way as I mentioned like,

var imageUrl = Alfresco.constants.PROXY_URI+"api/node/content/workspace/SpacesStore/"+{UUID of image content}+"/"+{Name of the image};

elCell.innerHTML = '<img src="'+imageUrl+'" width = "65px" height = "35px"/>';

Hope this helps.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

rjohnson — Wed, 21 May 2014 11:05:45 GMT

Should


"<img src=\"'+res+'\" width = \"65px\" height = \"35px\"/>";
‍‍‍

not be


"<img src=\"+res+\" width = \"65px\" height = \"35px\"/>";
‍‍‍

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Wed, 21 May 2014 12:24:06 GMT

Hi Aadit when I use innerHTML() and getElementById() function, I get an error saying, cannot recognize those functions. Most of the normal javascript functions won't work. Are there any settings to enable them in Alfresco?
Hi Bob, I had tried that too but still no luck.

Thanks!

Re: Adding an Image in HTML doc using JavaScript in Alfresco

aaditvmajmudar — Thu, 22 May 2014 04:22:51 GMT

I think you are not coding in client side JS file.

You are writing these code stuff in one of the webscript JS file OR Action JS file??

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Thu, 22 May 2014 12:14:15 GMT

Hi Aadit, sorry but I don't understand you. I am writing this javascript file in the Script folder of Data Dictionary and executing it using a rule on one of my folders. I wanted to invoke it using a simple rule so didn't use webscript but directly executing JavaScript. Thanks again for your time and looking into this.

Re: Adding an Image in HTML doc using JavaScript in Alfresco

juilee — Thu, 22 May 2014 15:29:00 GMT

Finally, writing it this way worked for me:


'<img src=\"'+res+'\" width = \"150px\" height = \"100px\" >'
‍‍‍