nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Adding an Image in HTML doc using JavaScript in Alfresco

juilee

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 image using document.createElement("img"); and var img = new Image(); but javascript is not able to recognize the createElement() method or the Image() object.
Can anyone suggest how an image can be added to the HTML doc using Javascript in Alfresco?

Find more posts tagged with

Comments

rjohnson

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?

juilee

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!

aaditvmajmudar

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.

juilee

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!

rjohnson

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).

juilee

Hi Bob, I tried exactly this:

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

Still, I am not able to see the image.

rjohnson

Can you post the contents of res?

juilee

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.

rjohnson

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.

juilee

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!

aaditvmajmudar

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.

rjohnson

Should

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

not be

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

juilee

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!

aaditvmajmudar

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??

juilee

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.

juilee

Finally, writing it this way worked for me:

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