I am sending emails containing images. I am using html templates for these emails. I want the images to be generated on the fly. Hence, the 'src' in the image tag is a url that makes a REST api call to my app. The images are dynamically created, a publicly accessible URL is created. I want this image to be displayed in the email. But I am not able to figure out how to return this image.
You probably want some code like this
the_image= Image.new(#whatever you want in your image)
response = HttpResponse(content_type="image/jpeg")
the_image.save(response, "JPEG")
return response
Related
I have to load an image to HTML page by indirect link. I make request to web server which dynamically generate an image then put it to image storage and return URL for this image as a response.
It's look like this:
<img src="https://my.web.server/get-image-link" alt="image"/>
And dummy server-side:
#RequestMapping("/get-image-link")
class ImageController() {
#GetMapping
fun getImage(): String = "https://image.storage/image.jpg"
}
Browser just show me the 'alt' but not an image. I tried different content types for response header but nothing helps.
There is any opportunity to make the browser show me the image by this generated link?
P.S. I cannot use JS code because this approach will be used in email content.
I am trying to get my image url from response object and store it in a variable here is my code for getting the image url from server
$http.post("http://aflaree.com/apmsservice/securityService.svc/AvailableFacility",loginID)
.success(function(response){
console.log(response);
console.log(response.facility);
console.log(response.FacilityImage);
$scope.img = response.FacilityImage;
console.log($scope.img);
})
.error(function(response){
console.log(response);
});
Here is my response for the above post method.
Here is my html where i am planing to display image
<div >
<img ng-src="{{img}}">
</div>
Issues
I am able to store or view my log for any field from response except FacilityImage field.
some how if i am able to store the image into $scope.img then using two way data binding will be able to show my image in html page
if there is any other way to make access of that image url form FacilityImage please let me know how to show that image to my view.
FacilityImage is an attribute of facility, therefore you have to access it like this:
response.facility.FacilityImage
Hope this helps!
UPDATE: actually event a level deeper, as facility is an array with multiple facilities, so assuming you pick the first one:
response.facility[0].FacilityImage
I have an image servlet which basically loads an image template on a url.
i am also able to access it through img tag.
Based on my response after form submission, i need to display this image
Following is an excerpt from my ajax code
document.getElementById("outmessage").innerHTML = "<h2><img src=\"${pageContext.request.contextPath}/sort-code-image\"/> </h2>";
I basically need to modify/draw on this image template before i display it on my jsp page.
I am a bit confused as to how to proceed with this problem.
Do i modify the image on servlet everytime when i do some of my business logic
or is there a better way to do this?
Apologies for some terminologies as i am a bit new to servlet and ajax.
Any inputs is highly appreciated.
We can use the following to write a base64 encoded data to img src attribute in java script and can modify the image.
var src3="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAUAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1hByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADABAAIRAxEAPwDi677TfhJr99py3UstraPJGHjgmLbwcjhwB8vy5Pc9AQOccDXs9h8ZdKNjD/aNheLebf3ot0Vo8+qksDg9cHp0yeteFho0ZN+1Z+r5zWzClCH1GN9devp9+p5TreiX3h7VJNP1CLZMnIYcrIvZlPcH/EBBFZ1dF408T/8JX4ga+SDyYI4xDCp+8UBJBbtklj06cDnGTztYVFFSajselhJVpUISrq07arzCiiipOgKKKKAP//Z";
document.getElementById("outmessage").innerHTML = "<h2> Image \<img src\= "+src3+" /></h2>";
I figured out the same when i faced the problem mentioned in following link
setting variable value in src attribute of image tag to a base64 encoded image in javascript/ajax
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.
I am pulling in data from Wordpress using Json API plugin. I am successfully getting the array of attachments using:
var myImage=myJSON[j].attachments;
But that gives me the whole array. How do I get just the thumbnail image from inside that array?
If you want the post thumbnail url for the post "featured image" you can just do:
var myImage=myJSON[j].thumbnail_images.thumbnail.url;
If you want to get the thumbnail of any attachments URL do this:
var myImage=myJSON[j].attachments[0].images.thumbnail.url;
just replace the "[0]" with the index of the image you want to get. console.log() and check your JSON response to find the index of the desired image.
With the current version of this plugin, this works as kmazla described only if you upload the image while editing the post/or creating the post for the first time. If you attach an existing image from the media database, it will still show up as an empty array in the query. If you decide to upload more photos (since the first one you uploaded was as mistake for example) they get appended to the attachments array even though you only select one of the images as your "featured image". It is quite confusing.
The workaround?
Make a fresh new post and make sure you attach the right images in the right sequence. Older posts should be deleted and republished for the attachments array to be lined up properly.