wie man Bild mit mongodb (mongoose) zurückholt/reagiert?

Question

Ich möchte Bilddatei mit mongodb auf der Serverseite speichern. und ich möchte dieses (gespeicherte) Bild auf der Vorderseite anzeigen.

Unten ist mein serverseitiger Code.

const Video = new Schema({ 
    ...file owner, file path, etc,. 
    screenshot: { 
     type: Buffer 
    } 
}); 

// Extract thumbnail by using ffmpeg. 
    let resDir = __dirname + '/resources/'; 
    let videoFullPath = resDir + 'videos/' + newFileName; 
    let ssFullPath = resDir + 'screenshots/' + newFileName + '.png'; 
    let execCommand = 'ffmpeg -i ' + videoFullPath + 
         ' -f image2 -t 0.001 -ss 1.0 ' + ssFullPath; 
    childProcess.exec(execCommand); 

    // Save Video information DB. 
    let newVideo = new Video({ 
     ...file ownef, file path, etc,. 
     screenshot: ssFullPath, 
    }); 
    newVideo.save((err, data) => { 
     if(err) throw err; 
     return res.json({success: true}); 
    }); 

Und unten ist meine Vorderseite Code. (MovieClipData ist mongoDB Objekt)

const imgSrc = 'data:image/png;base64,' + movieClipData.screenshot.data; 
<img src={imgSrc}/> 

denke ich, Dateityp (base64, binär ...) dieses Problem verursachen. also habe ich versucht, Dateityp zu base64 zu konvertieren, aber es hat nicht funktioniert. (vielleicht hätte ich es nicht richtig gemacht ...)

Können Sie erklären, wie Dateityp übereinstimmen?

Answer 1

Ich bin mir nicht sicher, dass es eine data Eigenschaft auf Ihrem movieClipData.screenshot Objekt von dem gibt, was Sie über Ihr Backend beschreiben.

Haben Sie versucht, es als eine URL direkt zu verwenden, da Sie screenshot: ssFullPath haben, die screenshot ist keine Buffer wie im Schema beschrieben, aber eine Zeichenfolge des Filepath von ffmpeg gespeichert.

<img src={movieClipData.screenshot} />