mongodb（mongoose）/ reactで画像を取り込む方法は？

Question

サーバ側でmongodbを使って画像ファイルを保存したい。 と私はこの（保存された）画像を前面に表示したいと思います。

以下は私のサーバー側のコードです。

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}); 
    }); 

以下は私のフロントサイドコードです。 （movieClipDataはmongoDBオブジェクトです）

私はファイルタイプ（base64、バイナリ...）がこの問題を引き起こすと思います。 私はファイルタイプをbase64に変換しようとしましたが、動作しませんでした。 （おそらく私はそれを正しくしなかったでしょう...）

ファイルの種類の一致方法を説明できますか？

Answer 1

あなたのバックエンドについて説明しているmovieClipData.screenshotオブジェクトには、dataというプロパティがありますかわかりません。

はscreenshotがスキーマで説明したようにBufferが、ffmpegのことで保存されたファイルパスの文字列ではありません、あなたはscreenshot: ssFullPathを持っているので、あなたは、直接URLとしてそれを使用しようとしました。

<img src={movieClipData.screenshot} />