如何解决图像未显示在 react-leaflet 弹出窗口 (MongoDB) 中
我正在努力在弹出窗口中显示图像。我使用 multer 和 GridFsStorage 在 MongoDB 中存储数据和图像,所以它们在一个桶中。然后我使用 gridfs-stream 从桶中获取图片。
我测试的时候在服务器浏览器中出现了图片,但是在客户端的弹窗里面却显示为一个白框...
服务器
imageRouter.route('/image/:filename')
.get((req,res) => {
gfs.files.findOne({filename: req.params.filename},(err,file) => {
// Check if file
if(!file || file.length === 0){
return res.status(404).json({
err: 'No file exists'
});
}
// Check if image
if (file.contentType === 'image/jpeg' || file.contentType === 'image/png' || file.contentType === 'image/heic') {
// Read output to browser
const readstream = gfs.createReadStream(file.filename);
var bufs = [];
readstream.on('data',function(chunk) {
bufs.push(chunk);
}).on('end',function(){ // done
var fbuf = Buffer.concat(bufs);
var base64 = (fbuf.toString('base64'));
res.send('"data:'+ file.contentType + ';base64,' + base64 + '"');
// Shows the image in server browser
//res.send('<img src="data:image/jpeg;base64,' + base64 + '">')
})
} else {
res.status(404).json({
err: 'Not an image'
});
}
});
});
客户端(App.js)
{
this.state.images.length > 0 && this.state.images.map(image => (
<Marker
key={image._id}
position={[image.latitude,image.longitude]}
icon={gpsDirectionMarker}
rotationAngle={image.GPSImgDirection}>
<Popup>
<b>Prosjekt: </b>{image.prosjekt} {image.prosjektOmrade}<p/>
<b>Parsell: </b>{image.parsell}<p/>
<b>Kategori: </b>{image.kategori}<p/>
<b>Høydemeter: </b>{image.GPSAltitude}<p/>
<b>Dato tatt: </b>{image.captureDate}<p/>
<img src={`${getPictures(image.imageName)}`} alt={image.imageName} className="popupImage"/>
</Popup>
</Marker>
))}
客户端 (API.js)
export async function getPictures(filename) {
const response = await fetch(`${API_URL}/image/${filename}`);
return response.json();
}
我真的希望有人能帮助我! 谢谢:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。