Senden zurück img mit Text

Question

Ich schreibe einfache Blog-App. So ist das, was für die Zeit nach wie mein Schema aussieht:

const postSchema = new Schema({ 
    img: String, 
    title: String, 
    content: String, 
    date: String 
    }); 

Ich lade img-Datei in/uploads Ordner und speichern Sie den Pfad zu dieser img als String für jeden Post.

Ich frage mich, wie kann ich dies an die Client-Seite senden. Fürs Erste sende ich den Beitrag als JSON. Kein Problem mit Text (Titel, Inhalt und Datum) anzuzeigen, aber das Bild ist ein wenig Kopfschmerzen.

Wie wird das richtig gemacht?

Ich werde React + Redux für die Clientseite dieses Blogs verwenden.

Answer 1

Sie benötigen das fs-Modul, um auf das Dateisystem zuzugreifen;

fs = require('fs'); 

Und in dem Rückruf für GET-Anforderung empfangen:

var img = fs.readFileSync('./pathToImage'); 
res.writeHead(200, {'Content-Type': 'image/gif' }); 
res.end(img, 'binary'); 

Answer 2

Da Sie react und redux auf der Client-Seite verwenden, mögen Sie wahrscheinlich nur den Pfad Server-Seite übersetzen in einen Client-Seite Pfad. Wenn Ihr Server beispielsweise Dateien von: /path/to/server/public bereitstellt und Sie auf /path/to/server/public/uploads hochladen, möchten Sie wahrscheinlich nur die URL als /uploads senden.

Auf der clientseitige, können Sie einfach Ihre URL zeigen den relativen Pfad, wie:

import { Component } from 'react' 
import { connect } from 'react-redux' 

class Post extends Component { 
    ... 
    render() { 
    <div className="post"> 
     /* Any other rendering you want to do here */ 
     <img src={this.props.img} /> 
    </div> 
    } 
} 
export default connect(
    /* Assuming your Redux store has the post stored as `post` */ 
    state => state.post, 
)(Post)