I have an app where it displays few image on a webpage. These images are loaded through backend (java - springboot) api which returns image from the file path which is then converted to blob and displayed on frontend. So there is no direct access to image using any URL, it can be accessed through API only with some authentication.
Now problem is I need to embed this image in the mail when user shares it.
But I'm not able to find any way for that.
In the backend, I have tried converting image to base64 and blob like this,
image = servePicture(details.getCoverImage());
byte[] encodeBase64 = Base64.getEncoder().encode(image);
String base64Encoded = new String(encodeBase64, "UTF-8");
result = encoder.encodeToString(details.getCoverImage().getBytes());
String base64string = result;
byte[] decodedByte = Base64.getDecoder().decode(base64string);
Blob bitmap = new SerialBlob(decodedByte);
Then using this blob value in email template,
I have tried adding in my email template
<img width="45px" height="45px" alt="coverImage" th:src="#{bitmap}"></img>
//api call
<img width="45px" height="45px" alt="coverImage" th:src="#{http://localhost:3000/api/files/shareimg/TY_FLR_120.png}" ></img>
//direct file path
<img width="45px" height="45px" alt="coverImage" th:src="#{D:/shareData/Flowers/TY_FLR_120.png}" ></img>
But this does not work. Also there is another issue with gmail blocking blob images
Is there any other way which can help to show inline images which are loading thru API?
You don't need to decode base64 back to Blob, just display the image in base64 string.
Try to replace your th:src to
th:src="*{'data:image/png;base64,'+ base64string}"
Related
In a controller I return a view with data. Along with this data, how can I also send back an image?
The image needs to be loaded via Storage as it's private, I get the image and build an image response in a class.
How can I also return this image response along side my data?
I've tried setting the response to a var in my data and displaying that in img src but it fails to load the image.
Normally I work with url. Storage::url('file.ext') give you a lot of possibility. There is also a way to create temporary url with this method within the Storage facade $url = Storage::temporaryUrl('file.jpg', now()->addMinutes(5)); You have to indicate when the url should expire.
There is another method that I use with drawboard.
You first have to get the content of your image. I don't remember, but I think the get() method of storage do the job. Maybe it's a bit more complex.
Whatever, you have to get the raw data of the image, put it into a variable and send it to the view.
Then, in the src of the image, you do this:
<img src="data:image/png;base64, {{$varToRawData}}" />
Be sure to use the right image/extension
I am displaying a pdf in browser with inline from API using an aspx page.
While saving the pdf using Chrome/Firefox, takes the filename from header("Content-Disposition", "inline;filename=xyz.pdf")
But while saving the pdf using IE it does not reads the filename from header("Content-Disposition", "inline;filename=xyz.pdf"). instead it takes the aspx name.
Technical details
I have an xyz.aspx page.
The xyz.aspx page will invoke an API for a document.
Then the downloaded document from API will transferred to browser with inline to display the pdf document.
Am setting the response header as below and writing the file bytes.
HttpContext.Current.Response.ClearHeaders();
Response.AddHeader("Content-Disposition", "inline;filename=\"" + Name + "\"");
HttpContext.Current.Response.ContentType = "application/pdf";
Issue:
While saving the opened pdf in IE it takes xyz.aspx instead of the name from header.
Requirement:
While saving the pdf using IE, it need to save with the name of pdf.
I googled so much, as every one tells its IE behavior. I hope some one knows a solution.
Note: I have to display the pdf in browser and then save. Not to download using "attachment"
It is true some versions of IE can't handle ("Content-Disposition", "inline;filename=...")
This is because filename=... was originally intended for the attachment disposition. Not all browser-based PDF viewers can handle it.
The only solution I see is to allow access via a different url.
Suppose you have a route to the pdf like: /pdf/view. If you change it to /pdf/view/filename and you configure your application to handle this route in the same way as /pdf/view your problem is solved.
You can also re-write the download url on the webserver.
Depending on your webserver you have various ways of doing this.
I have also tried with all kind of headers and methods.
In the end, my solution was
private FileResult ReturnStreamAsPdf(string fileName, Stream stream)
{
ContentDisposition cd = new ContentDisposition
{
FileName = fileName,
Inline = true // false = prompt the user for downloading; true = browser to try to show the file inline
};
Response.Headers.Add("Content-Disposition", cd.ToString());
Response.Headers.Add("X-Content-Type-Options", "nosniff");
return new FileStreamResult(stream, MediaTypeNames.Application.Pdf);
}
and the Route Attribute on the method:
[Route("api/getpdfticket/{ticketnumber}")]
public async Task<FileResult> GetPdfTicket(string ticketnumber)
And the href:
href="#($"/api/getpdfticket/{product.TicketNumber}.pdf")"
It seems like Microsloft is still inventing their own standards:
http://test.greenbytes.de/tech/tc2231/#inlwithasciifilenamepdf
PDF Handler : content-disposition filename
I have create private folder in application folder: application/private/username, I'm uploading images here with ajax, that works, but how can I retrieve that image with ajax, and display it in img tag. First problem is that http://example.com/application/private/useraname/img.jpg is protected, I can't access it through out url in browser, how to display an image. Just advice, I wanna write code on my own.
This is part of function(that is part of controller) that grabs image:
$filepath = 'path to image';
header("Content-type: image/jpeg");
if (file_exists($filepath)) {
$img_handle = imagecreatefromjpeg($filepath) or die("");
echo $img_handle;
ImageJpeg($img_handle);
}
But how to get this image with ajax?
You might want to create a PHP file that would get the filename eg thumb.php?src=img.jpg and inside that file, you load the image from that path and display it. This way the path of the images are not exposed to the user.
I am looking for good ways to retrieve images from MongoDB and display them. For example, to retrieve a profile picture and display it on a profile page, this is how I am currently doing it:
profile page
block content
h1= session.user.name
img(src='/avatars')
routes
exports.avatars = (req, res) ->
users.find req.session.user, (err, user) ->
if user
res.writeHead('200', {'Content-Type': 'image/png'})
res.end(user.avatar.data, 'binary')
else
res.locals.flash = err
res.render('index', {title: 'Home'})
Basically I render the profile page, and the img tag sends a request back to the server to pick up the picture of the user from the database. Im saving the images as BinData in MongoDB. Not using GridFS because I expect the pictures to be small.
Is there a better way to do this?? I tried to send the image data directly to the jade view using res.render('users/show', {picture: data}) but the img tag didn't like that and I'm not clear on why. Is this approach a dead end?
Any comments/suggestions would be much appreciated. Thanks!
Sending the image data directly to jade view would work if
a) you base64 encoded the image data
b) prefixed with "data:"
But I would not recommend you do this way, you essentially in-lining the image in your html.
You should instead create a separate route to handle your images/avatars.
For example the image source for your avatars should be something like
img(src='http://mydomain.com/avatars/user1.jpg')
When the browser requests this image you then respond with image data retrieved from mongo.
having problems serving an image stored as a blob from google app engine - I'm trying to view a stored image with the following code
my datastore model is:
class QuestionTemp(db.Model):
picture = db.BlobProperty()
my post call from the initial form is:
class QuestionAsker3(webapp.RequestHandler):
def post(self):
upload_files = self.request.get('file') # 'file' is file upload
tempQuestion = QuestionTemp(picture= db.Blob(upload_files))
tempQuestion.put()
self.response.headers['Content-Type'] = "image/jpeg"
self.response.out.write(tempQuestion.picture)
The image is stored in the blobstore as I can view it in the GAE admin console
"blob viewer".
In chrome the return screen in blank - firefox I get a url and what looks to be a hashcode.
many thanks in advance.
managed to solve the problem - was reading the data into the Blobstore, rather than as a Blob
so the Blob was just storing a references hence had no image data. The .value thing didn't work for me.
Thanks for helping me figure it out #abdul and #adam