I have a sidepanel, its code get data uri image from server (specifically from a Google Docs, by using google.script.run).
I need to display it, I'm trying to do so on an IMG tag in the HTML document, but the sandbox forbid to assign anything to img.src .
Any ideas, instead of using templates? Because I want to change the image dynamically.
Thank you
If you are working inHtmlService.SandboxMode.IFRAME mode you can pass the base64 to the image src. Below is an example of using a template to do this.
code.gs
function doGet() {
var t = HtmlService.createTemplateFromFile('index');
t.icon = icon;
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
index.html
<div>
<img src="data:image/png;base64,<?=icon?>"/>
</div>
icons.gs
var icon = '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';
Related
I have a class name 'MonthReport.class.php' and its structure like the following:
class MonthReport{
.....
//some member variables
public function pieChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function lineChart(){
........
//the image data comes from mysql and data belongs to a specified user
$myPicture->Stroke();
}
public function render html(){
$html.=str1<<<
.....
//some html code
str1;
$html.=<<<str2
<img src="$this->pieChart()" /> //can not work
str2;
}
}
when I call the pieChart() function with this in the place src it will overwrites my entire page and just shows the image.how can I do this?
I try to render the image in a separate page but the image need some specified user data eg.'userId'.in others words when i new a object, it specify the userId,so I can not render the image in a separate page.
sorry for my bad english!but I need your help!thanks in advancd!
Your question is a little unclear but if your problem is what I am assuming it to be, then I used to have similar issues (Graphic created that is just an image with all of the rest of my page content not displaying). My solution was to generate a temporary image using pchart then embed that file in the html
$myfilename = "temp_image.png"; // temp file name
$myPicture = new pImage(700,500,$myData);
// other image creation code....
$myPicture->Render($myfilename); // generate image "temp_image.png"
$image_html = '<img src="' . $myfilename . '">'; //generate the link
print("$htmlline");
Again there is some guesswork going on here as your question is unclear. The above works for me though and enables me to embed an image created on the fly by pChart into my php pages.
I have a UiApp script that display images in flextable; I have assigned mousedown handler to the images so that when it is clicked I want it to open a templated HTML page (in a new window). I wrote the following code; it gets executed but it doesnt return anything.
What should I do to get the Item Detail page containing the image loaded from the imageurl assigned to be opened in a new window?
Here's my script and html code:
var page = HtmlService.createTemplateFromFile("Item Detail");
var image = productDetails[i].imageurl;
page.imageurl = image;
Logger.log(productDetails[i].imageurl);
return page.evaluate();
<img src=<?=imageurl ?> alt="click for more info" height="100%" width="100%">
So suppose you want to make a clickable image. And you want this image to open in a new window when you click on it.
var anchor = app.createAnchor("<img src='URL_TO_IMAGE' />",
true,
ScriptApp.getService().getUrl()+"?detailPage="+SOME_ID)
.setTarget("_blank");
Then when you click on that link, your script will be opened in another window. And also, a GET parameter will be passed along with it. So in your doGet(e) function, you could handle whether to display the main UiApp or an Html detail page.
function doGet(e) {
if (e.parameter.detailPage) {
//show the detail page
} else {
//show the normal UiApp
}
}
Read the top part of this other answer to get a better idea of how GET parameters work with GAS.
You will want to surround the <img> with a <a> tag.
<img ... >
When I want to render a picture, I send a request to the server with the associated picture to render. What's odd is how it's returned:
<img src="https://blargh.com/displayTemplate?templateid=template1">
Where that link is supposed to be the image data.
Using this, how can I transform that into an image that I can display to the user? This is for a facebook app, I can't just embed the HTML. It needs to be displayed inside my AS App as a Bitmap or Sprite or anything, really. Trying to convert it to a Bitmap or BitmapData have failed...
The only other information I can give is that my templateLoader is a Loaderand its .data is supposed to carry the HTML.
Something like this:
var data:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">';
// grab the src attribute
var url:Array = data.match(/<img src=\"(.*?)\">/);
if (url.length > 1){
var loader:Loader = new Loader();
loader.load(new URLRequest(url[1]));
addChild(loader);
}
Use e4x. I'm not sure if you're getting a string or the result format on your service call is already XML, but if it's a string, you'd do something like this:
var imgXML:XML = XML(yourString);//yourString contains <img src="https://blargh.com/displayTemplate?templateid=template1">
link = imgXML.#src;
Then, look at the code Zevan posted for how to use a Loader if you're using just AS, or use it as the source for an Image control in Flex.
Looks like the server is providing you with a link that dynamically looks up the image based on the GET data you're passing to the server (the ?templateid=template1). Too bad you didn't paste in the real link so that this theory could be proven. Take the real link and copy out the http:// portion, enter it into your browser and if the image appears then this is indeed the case.
If this is true, then you want to extract the link from the tag. You could do this with a regular expression, like so:
/\?)"(.?)"(.*)/
If you ran that regex against the full tag like you've provided above, then capture group 2 will contain just the HTTP link. You can then use a Loader object to fetch the image so you're actually downloading and presenting the binary image data instead of embedding HTML.
If you're going to be using Regex in AS3, then you absolutely must have the RegExr tool by grantskinner.com: http://gskinner.com/RegExr/desktop/.
Also, to get the data from capture group 2 we do this:
var imageTag:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">'
var myHttpRegex:Regex = /\<img(.*?)"(.*?)"(.*)/;
var result:Object;
result = myHttpRegex.exec(imageTag);
if(result != null) {
var imgUrl:String = result[1];
}
Code is untested, but the concept is there.
Hi I have the following html inside one of my javascript files.
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div id="infoWindowString">'+
'<img src="assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See more info</p>'+
'<p>see news</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
The problem is I cannot get the image to show up in the info window.
I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.
EDIT- Changed to following after the response below:
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div class="infoWindowString">'+
'<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See Menus</p>'+
'<p>Upload a Menu</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
But image still not showing up :(
If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.
The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.
For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:
<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>
You can get that path anywhere in jQuery using
var imageUrl = $('a#image_link').data('image-url')
You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at
http://example.com/assets/images/rails.png
but you are currently at
http://example.com/something/somepage.html
the browser will try to load it from
http://example.com/something/assets/images/rails.png
and it will fail.
You should be using an absolute URL.
i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">
Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.
i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.
First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.
The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.
Back to your question: you can use ${pageContext.request.contextPath} for this.
<img src="${pageContext.request.contextPath}/images/pageSetup.gif">
See also:
How to use relative paths without including the context root name?
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
You can't write JavaScript in the src attribute. To do what you want, try some code like this:
var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);
Here the target; the place where you want to display the image, is a div or span, with the id display.
Demo
With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:
<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>
Demo
Do not use this.
You must use JavaScript for this.
First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:
<img src="empty.gif" real_src="/images/pageSetup.gif" />
Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:
var contextPath = "/MyRealWeb";
window.onload = function() {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var realSource = image.getAttribute("real_src") || "";
if (realSource.length > 0)
image.src = contextPath + realSource;
}
};