小编Abh*_*lli的帖子

我从Nodejs服务器收到一个bindata,现在我需要显示一个图像.

我怎样才能做到这一点？有没有什么方法可以将bindata转换为JPEG或任何其他格式？或者是否可以在服务器中转换它然后发送该图像作出反应？

这是我试图item.Image.data.data用图像标记显示二进制数据()的方法:

<img src={item.Image.data.data} />

这是我详细的反应代码片段:

componentDidMount(){
  let self = this;
  axios.get('http://localhost:8080/list')
    .then(function(data) {
      console.log(data);
      self.setState({post:data.data});
    });
}

<ul className="w3-ul w3-card-4 w3-light-grey">
  { this.state.post.map((item, index) => {
    return (
      <Link  to="/displaylist" style={{ textDecoration: 'none' }} key={index}>
        <li className=" w3-hover-green w3-padding-16" onClick={this.handleClick(item.Id)}>
          <img src={item.Image.data.data} className="w3-left w3-circle w3-margin-right" width="60px" height="40px" />
          <span>{item.Firstname}</span><br/><br/>
        </li>
      </Link>
      )}
  )}
</ul>

这是我的nodejs代码片段:

server.get('/list', function(req, res) {
    databaseInterface.listStudent(function(err, students) {
      var myJSON = students;

      res.json(myJSON);
      // You should see the newly saved student here …

我收到如下指定的错误。我不知道我哪里出错了。请帮帮我。我也改变了我的 webpack 配置，我也更新了 react-hot-webpack 加载器，但我仍然收到这些错误..

提前致谢。

这些是我得到的错误。

ERROR in ./~/redux-form/lib/reduxForm.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/reduxForm.js 27:18-40

ERROR in ./~/redux-form/lib/values.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/values.js 9:18-40

ERROR in ./~/redux-form/lib/ConnectedField.js
Module not found: Error: Cannot resolve module 'react-redux' in /home/priyanka/Finalproject/node_modules/redux-form/lib
 @ ./~/redux-form/lib/ConnectedField.js 13:18-40

这是我的反应代码

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import React, { Component } from 'react';
import { …

我在 nodejs 中运行服务器，在执行服务器代码时，我收到错误消息“（节点：7692）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝 ID：2）：错误：请求失败，状态代码为 400（节点：7692）弃用警告：不推荐使用未处理的承诺拒绝。将来，未处理的承诺拒绝将以非零退出代码终止 Node.js 进程”。

这是我的 serverrender.js 代码

import axios from 'axios';
import config from './config';

axios.get('${config.serverUrl/api/contests')
.then(resp=>{
    console.log(resp.data);
});

这是我的 srver.js 代码

    import config from './config';
    import apiRouter from './api';
    import express from 'express';
    import path from 'path';
    import sassMiddleware from 'node-sass-middleware';

    import './serverRender';
    const server=express();
    server.set('view engine','ejs');

    server.use(sassMiddleware({
        src:path.join(__dirname,'sass'),
        dest:path.join(__dirname,'public')
    }));

    server.get('/',(req,res)=>{

        res.render('index',{
            content:"... "
        });


});
server.use(express.static('public'));

server.use('/api',apiRouter);

server.listen(config.port, config.host, () =>{
    console.info('express listening on port ',config.port);
});

无法将图像显示为未找到错误，但我提供了它的完整路径。我不知道我哪里出错了。

class App extends React.Component {

   render() {
      return (
               <div>
                  <h1> hello</h1>    
                <img src="/home/priyanka/Finalproject/src/components/3.jpg" alt="cannot display"/>    
              </div>    
           );
         }
  }

export default App;

我已经将图像插入数据库，并且我正在从数据库到服务器以及reactjs接收图像，但是在我的反应中，我接收到的图像具有二进制数据。但是我如何将二进制数据转换为图像中的反应。

class Pre extends React.Component{
  constructor(props){
    super(props);
    this.state={
      post:[]
    };

  }


componentDidMount(){
   let self = this;
  axios.get('http://localhost:8080/images')
  .then(function(data) {
      //console.log(data);
      self.setState({post:data.data});
      });
  }


  render(){

console.log(this.state.post);
    return(
    <div className="w3-container">


    <p className="addboard"> <Link className="linkpre"  to="/createstudent I">
      <button className="addbutton" type="button"><h1>+</h1></button></Link></p>


      {this.state.post}

)}
)}

</div>

    );
  }
}
export default Pre;