如何解决如何通过React通过Express.js显示保存在MongoDB中的图像?
某种原因导致我的产品图像呈现为小小的黑匣子或破碎的图像。
因此,产品集合中的产品:
{
"_id" : ObjectId("5f35bf52a6f23e560250d322"),"photo" : { "data" : BinData(0,"/9j/4AAQSkZJRgABAQA...),"contentType" : "image/jpeg" },"variations" : [
ObjectId("5f35bf52a6f23e560250d324"),ObjectId("5f35bf52a6f23e560250d325"),ObjectId("5f35bf52a6f23e560250d323") ],"name" : "Carrot Juice","description" : "Carrot juice!","category" : ObjectId("5f339503ca7d362b44305a8b"),"createdAt" : ISODate("2020-08-13T22:31:46.903Z"),"updatedAt" : ISODate("2020-08-13T22:31:46.983Z"),"__v" : 0
}
控制器(假设req.product
是5f35bf52a6f23e560250d322
):
exports.productById = (req,res,next,id) => {
Product.findById(id)
.populate("category")
.populate("variations")
.lean()
.exec((err,product) => {
if (err || !product) {
return res.status(400).json({
error: "Product not found"
});
} else { req.product = product; next(); }
});
};
exports.photo = (req,next) => {
if (req.product.photo.data) {
res.set("Content-Type",req.product.photo.contentType);
console.log(`req.product.photo.data: `,req.product.photo.data);
return res.send(req.product.photo.data);
}
next();
};
路线:
router.get("/product/photo/:productId",photo);
呈现Card
的{{1}}组件(反应):
<ShowImage />
import ShowImage from './ShowImage'
const Card = ({ product }) => {
return (
<div className="card">
<div className="card-header name">{product.name}</div>
<div className="card-body">
<ShowImage item={product} url="product" />
</div>
</div>
);
};
export default Card;
组件,用于ShowImage
:
http://<host_ip>/api/product/photo/5f35bf52a6f23e560250d322
因此,应该显示来自如下网址的产品图片:import React from "react";
import { API } from "../config";
const ShowImage = ({ item,url }) => (
<div className="product-img">
<img
src={`${API}/${url}/photo/${item._id}`}
alt={item.name}
className="mb-3"
style={{ maxHeight: "100%",maxWidth: "100%" }}
/>
</div>
);
export default ShowImage;
我认为文档中可能缺少http://<host_ip>/api/product/photo/5f35bf52a6f23e560250d322
,但这是不可能的,因为每当我调用Buffer数据时都会在控制台中显示它,请参见:
为什么这不显示该URL上的快递图片?
更新:而且...在ShowImage中从某个网站上粘贴了一个随机的图像URL,导致该图像成功显示,所以我知道这很腥...
此URL仍然不会在浏览器中加载图像:
photo
解决方法
解决了!问题是在.lean()
中包含了productById
。这是productById
的更正代码,它随后可以正确渲染图像:
exports.productById = (req,res,next,id) => {
Product.findById(id)
.populate("category")
.populate("variations")
.exec((err,product) => {
if (err || !product) {
return res.status(400).json({
error: "Product not found"
});
} else { req.product = product; next(); }
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。