How to display image from server in nodejs and gridfs to frontend in reactjs
0
I'm getting image from NodeJS server in form of
createReadStream.pipe(res).
I'm receiving the response using axios.
My question is how do I display that response in image tag in react frontend
My code of backend which is sending the data
router.get('/get_profile_image/:filename',(req,res)=>{
gfs.files.findOne({filename:req.params.filename},(err,file)=>{
if(file){
const readStream=gfs.createReadStream(file.filename)
readStream.pipe(res);
}
else{
res.status(403).json("no file with this name")
}
})
})
My frontend code that receives the response:
import React from 'react';
import './friend.css';
import axios from 'axios';
class Friend extends React.Component{
constructor(props){
super(props);
this.state={name:'',picture:}
axios.get(`http://localhost:3002/get_name/${this.props.id}`)
.then(res=>{
this.setState({name:res.data})
})
axios.get(`http://localhost:3002/image/get_profile_image/
${this.props.profile_pic_id}`)
.then(res=>{
let picture=new Buffer('binary').toString('base64');
this.setState({picture:picture})
})
}
render(){
console.log(this.state.picture)
return(
<div className='inside'>
<img src={this.state.picture} height='200px' width='200px'/>
<h3>{this.state.name}</h3>
<br/>
</div>
)
**strong text**}
}
export default Friend;
I am getting nothing displayed in my image tag.
I am new to this so I'm finding it difficult to understand the already present answers
Thank You.
node.js reactjs gridfs
edited Nov 23 '18 at 13:57
xSavitar
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
add a comment |
0
I'm getting image from NodeJS server in form of
createReadStream.pipe(res).
I'm receiving the response using axios.
My question is how do I display that response in image tag in react frontend
My code of backend which is sending the data
router.get('/get_profile_image/:filename',(req,res)=>{
gfs.files.findOne({filename:req.params.filename},(err,file)=>{
if(file){
const readStream=gfs.createReadStream(file.filename)
readStream.pipe(res);
}
else{
res.status(403).json("no file with this name")
}
})
})
My frontend code that receives the response:
import React from 'react';
import './friend.css';
import axios from 'axios';
class Friend extends React.Component{
constructor(props){
super(props);
this.state={name:'',picture:}
axios.get(`http://localhost:3002/get_name/${this.props.id}`)
.then(res=>{
this.setState({name:res.data})
})
axios.get(`http://localhost:3002/image/get_profile_image/
${this.props.profile_pic_id}`)
.then(res=>{
let picture=new Buffer('binary').toString('base64');
this.setState({picture:picture})
})
}
render(){
console.log(this.state.picture)
return(
<div className='inside'>
<img src={this.state.picture} height='200px' width='200px'/>
<h3>{this.state.name}</h3>
<br/>
</div>
)
**strong text**}
}
export default Friend;
I am getting nothing displayed in my image tag.
I am new to this so I'm finding it difficult to understand the already present answers
Thank You.
node.js reactjs gridfs
edited Nov 23 '18 at 13:57
xSavitar
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
1
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
1
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06
add a comment |
0
0
0
I'm getting image from NodeJS server in form of
createReadStream.pipe(res).
I'm receiving the response using axios.
My question is how do I display that response in image tag in react frontend
My code of backend which is sending the data
router.get('/get_profile_image/:filename',(req,res)=>{
gfs.files.findOne({filename:req.params.filename},(err,file)=>{
if(file){
const readStream=gfs.createReadStream(file.filename)
readStream.pipe(res);
}
else{
res.status(403).json("no file with this name")
}
})
})
My frontend code that receives the response:
import React from 'react';
import './friend.css';
import axios from 'axios';
class Friend extends React.Component{
constructor(props){
super(props);
this.state={name:'',picture:}
axios.get(`http://localhost:3002/get_name/${this.props.id}`)
.then(res=>{
this.setState({name:res.data})
})
axios.get(`http://localhost:3002/image/get_profile_image/
${this.props.profile_pic_id}`)
.then(res=>{
let picture=new Buffer('binary').toString('base64');
this.setState({picture:picture})
})
}
render(){
console.log(this.state.picture)
return(
<div className='inside'>
<img src={this.state.picture} height='200px' width='200px'/>
<h3>{this.state.name}</h3>
<br/>
</div>
)
**strong text**}
}
export default Friend;
I am getting nothing displayed in my image tag.
I am new to this so I'm finding it difficult to understand the already present answers
Thank You.
node.js reactjs gridfs
edited Nov 23 '18 at 13:57
xSavitar
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
I'm getting image from NodeJS server in form of
createReadStream.pipe(res).
I'm receiving the response using axios.
My question is how do I display that response in image tag in react frontend
My code of backend which is sending the data
router.get('/get_profile_image/:filename',(req,res)=>{
gfs.files.findOne({filename:req.params.filename},(err,file)=>{
if(file){
const readStream=gfs.createReadStream(file.filename)
readStream.pipe(res);
}
else{
res.status(403).json("no file with this name")
}
})
})
My frontend code that receives the response:
import React from 'react';
import './friend.css';
import axios from 'axios';
class Friend extends React.Component{
constructor(props){
super(props);
this.state={name:'',picture:}
axios.get(`http://localhost:3002/get_name/${this.props.id}`)
.then(res=>{
this.setState({name:res.data})
})
axios.get(`http://localhost:3002/image/get_profile_image/
${this.props.profile_pic_id}`)
.then(res=>{
let picture=new Buffer('binary').toString('base64');
this.setState({picture:picture})
})
}
render(){
console.log(this.state.picture)
return(
<div className='inside'>
<img src={this.state.picture} height='200px' width='200px'/>
<h3>{this.state.name}</h3>
<br/>
</div>
)
**strong text**}
}
export default Friend;
I am getting nothing displayed in my image tag.
I am new to this so I'm finding it difficult to understand the already present answers
Thank You.
node.js reactjs gridfs
node.js reactjs gridfs
edited Nov 23 '18 at 13:57
xSavitar
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
edited Nov 23 '18 at 13:57
xSavitar
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
edited Nov 23 '18 at 13:57
xSavitar
670523
edited Nov 23 '18 at 13:57
xSavitar
670523
edited Nov 23 '18 at 13:57
xSavitar
670523
670523
asked Nov 23 '18 at 11:22
Abhinav Singh
1
asked Nov 23 '18 at 11:22
Abhinav Singh
1
asked Nov 23 '18 at 11:22
Abhinav Singh
1
1
1
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
1
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06
add a comment |
1
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
1
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06
1
1
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
1
1
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445786%2fhow-to-display-image-from-server-in-nodejs-and-gridfs-to-frontend-in-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445786%2fhow-to-display-image-from-server-in-nodejs-and-gridfs-to-frontend-in-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Your this.state.picture should be a url ,not an array. Also , you are not using res in the then handler of second axios call. Could you please provide what you are getting in the res object
– anuragb26
Nov 23 '18 at 12:24
1
yes you are correct I solved it with using url. stackoverflow.com/questions/47530471/… and alos took help from this answer
– Abhinav Singh
Nov 23 '18 at 14:06