All is working good except of the fact that, i am trying to display user profile images of user who sent a chat message in a chat room .
this is what my image patth prints "profilepics/images_g9LwcHF.jpg".
Note i am using django framework
<script>
chatSocket.onmessage=function(e){
var tag_img=document.createElement('img');
var get_user=document.querySelector('#user').value
var tagname=document.createElement('li');
var data =JSON.parse(e.data);
document.querySelector('.img_tag').src=data.message.sender_img
</script>
Dom
<img class ="img_tag">
This is my consumer.py
messaage_json={
'user':me.username,
'message':message_object.message,
'sender':message_object.sender.username,
'sender_img':str(message_object.sender.profilepicture),
'created':str(message_object.created)
}
#coverting data to string
myResponse={
"message":messaage_json,
}
#broad cast the message event to be send
# in the layaer
await self.channel_layer.group_send(
self.room_group_name,{
# call the chat_message method
"type":"chat_message",
#covert string data to json objects
"text":json.dumps(myResponse),
}
)
It prints out the user profile image path in the media file, but cannot display the image using javascript.
Note i am using django .
I do not see you actually injecting the newly created image DOM-node into the DOM, e.g. somewhere you would need to do that for the image to be displayed:
chatSocket.onmessage=function(e){
var data =JSON.parse(e.data);
var tag_img=document.createElement('img');
tag_img.src = data.message.sender_img;
document.querySelector('.img_tag').appendChild(tag_img);
yes i solved the problem . To display the image path, since all uploaded images are stored in django media file , i am to use the following bellow
tag_img.src = '/'+'media'+'/'+ data.message.sender_img;
Related
there's some images in the public folder and when a user chooses one of them, I have to post the image to the server, and it has to be the image file itself and not its name or anything else,
the problem is that when I import the image like this:
import file1 from "../../../public/static/images/1.png"
and then use this code:
const data = new FormData();
data.append("useChoice", file1);
the result will be empty or not a file. how should I handle it?
instead of load image and send it to client, then user send it to server again.
u should use link point to those images.
If u must do it that way, try https://webpack.js.org/guides/asset-management/#loading-images
I am working with two Express JS applications one is an API and second is application that is using this API by making requests and displaying received informations to user.
In API route I'm sending image as response:
router.get('/:customer_id',authController.isAuthenticated,(req,res) => {
.
. Retrieving customer data
.
return res.sendFile('/uploads/'+foundCustomer.doc_path);
});
And later another application is getting this document:
router.get('/:customer_id',(req,res) => {
var options = {
url: 'http://'+config.API.user+':'+config.API.password+'#'+config.API.host+':'+config.API.port+'/customers/'+req.params.customer_id
};
request(options,(err,response,body)=>{
return res.render('customer/show',{
document: ?, // Send document as parameter to view
});
});
});
In this point I want to render customer/show(EJS view engine) with customer document, but I don't want to save this document in my application files, because document is only needed to display in view (customer details and document are stored in another application).
I was trying to create temporary directory in my application structure, but it is difficult to manage deleting those not needed documents (Application has many users and at the same time many customers can be displayed).
Another solution that I was trying to implement is to make Ajax request on client side and latter append received document to <object data='document'>. But this request has to be authenticated with user and password, so I realised that storing credentials on client side javascript is not the best idea...
I am not sure that is it even possible to render and display image without saving in application files?
I would be grateful for any help, maybe the best workaround is to somehow manage temporarily saved documents.
Why not create a File object inside EJS template then use that for src attribute on an <img> ? You're already getting the raw buffer/blob from your image API server. Store it inside template.
From https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
// place this code (store this variable) inside of your EJS template
// so it can be used by the client-side JS
var aBlob = new Blob( array[, options]); // Where array is the raw buffer data returned from your image API server
See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
var objectURL = URL.createObjectURL( aBlob ); // Where object is a Blob object
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
const img = document.createElement('img');
img.src = objectURL;
Final solution (tested), using axios to make API request:
In my route I'm going to make HTTP request to my API to retrieve PDF file(document):
axios.get(`http://my-api/customer/id`).then(response => {
var photo = new Buffer(response.data, 'binary').toString('base64');
return res.render('customers/show',{
document: document
});
});
In my ejs view, I'm using HTML object tag to display received PDF:
<object data="data:application/pdf;base64,<%-document%>"></object>
I am currently changing the code for a Web application (written with Angular.JS and the ionic framework with jQuery) that has a page generator. This generator page writes the image information into a relational database (phpMyAdmin, 10.1.22-MariaDB). What I have to do is to add a new form to this app where the user selects an existing page from a list & opens it in the page generator.
The div element that holds the image object is created in the page generator with a $templateCache.put command and has the following form:
"$templateCache.put("ivm-image-builder/templates/image-builder.html", "
"<div class=\"hero\"\n" +
[…]
" <div class=\"hero-image\" ivm-bg-axis=\"y\" ivm-bg-drag ivm-bg-disabled=\"disabled\" ng-style=\"imageOptions.style\" ngf-background=\"ngModel\"></div>\n" +
[…]
The code runs properly when creating a new page. When using this generator page for an existing page that had been saved in the database, I can easily fill the text fields (like "page name" or "URL" (a text field)), but I wonder how the images can be displayed properly. I wonder if a longtext field or a BLOB is the appropriate field type in the DB.
Edit: To save the image in a database record, I need something that reads in pseudo-code
var cache = new BrowserCache();
var imageURL= cache.querySelector('url["blob:null/520cf0e0-fa19-438c-9db7-68af87f30f56"]');
var image = cache.getElement(imageURL);
// Convert image to appropriate format, if necessary
// Add image information to record to be sent to the server
My question is: How can I display an image received from the database, which has no associated URI & is not saved at any accessible location? Is it the right way to associate the image information with the ngModel tag?
I am newbie user of meteor. I am using file picker apis , i can easily upload my files to there server and they give me a unique url in return . When it comes to again fetch that file its creating a problem to me .
You can tell me how to get back file using that url by using filepicker api . You can tell me how to use that url and get image , by using meteor
When i upload a picture to filepicker.io they return me a json object like following
[{"url":"https://www.filepicker.io/api/file/kIrtNvQRta7GxlFVfiP2","filename":"brazil.jpg","mimetype":"image/jpeg","size":2660,"key":"ZML3OjrFTVyV4waBzRIT_brazil.jpg","isWriteable":true}]
So how to get the image on meteor?
Thank You in advance
The normal image source should work:
<template name="image">
<img src="{{img}}"/>
</template>
and your javascript to give it the url
Template.image.img = function() {
var yourfilepickerjson = [{"url":"https://www.filepicker.io/api/file/kIrtNvQRta7GxlFVfiP2","filename":"brazil.jpg","mimetype":"image/jpeg","size":2660,"key":"ZML3OjrFTVyV4waBzRIT_brazil.jpg","isWriteable":true}]
return yourfilepickerjson[0] && yourfilepickerjson[0].url;
}
You could pass the filepickerjson via Session object so that its reflected reactively as soon as you get it
Any idea?
I checked the Youtube API that doesn't support this feature.
Is it possible?
I need to get the thumbnail picture via username directly.
for example:
I got a username named: communitychannel
and I want to get the following thumbnail picture:
http://i2.ytimg.com/vi/YVrqydZz3e4/default.jpg
Thanks your reply!!
I know I can retrieve thumbnail data by doing this. But the case is, I will get a Youtube member's subscription item list first via the following URL:
http://gdata.youtube.com/feeds/api/users/[USER_NAME]/subscriptions
From the Youtube official document, it indicate that the response data include tag. But I never see it...
If list length is 100, then I need to send total 101 requests to get the thumbnail data for each item. But it will consume too much network bandwidth to do that.
So, is any other way to accomplish the requirement? Thanks!! ;-)
You can get the users image by using a url like this:
http://gdata.youtube.com/feeds/api/users/communitychannel
You can get just the username and image thumbnail by appending a query string as described in the
partial responses api:
?fields=yt:username,media:thumbnail
You can get the response in json format to use easily in javascript by appending:
&alt=json-in-script&format=5
You can also specify a callback to execute when the response has loaded by appending: &callback=showImage
Your url now looks like this:
http://gdata.youtube.com/feeds/api/users/communitychannel?fields=yt:username,media:thumbnail&alt=json-in-script&format=5&callback=showImage
To use this in a page put it in a script tag like so:
<script type='text/javascript' src="your_url"/>
and the callback should look like this:
function showImage(data)
{
var name= data.entry.yt$username.$t;
var url = data.entry.media$thumbnail.url;
$(document).append("<img src='"+ url +"'/>");
}
You must make sure that the showImage callback function is defined before you load the data.
I have created a sample of loading a feed and the user images here (Make sure you change communitychannel to your own username or it won't work)
I can't see a better way of reducing your bandwidth than using the partial responses api;