如何在MongoDB中存储产品图片并在React前端关联展示产品详情

方案一：存储图片公网URL（推荐，适配你当前已有谷歌图片的场景） #

• 第一步：修改产品Schema，新增image字段

const mongoose = require('mongoose');

const productSchema = mongoose.Schema({
  name: String,
  category: String,
  price: Number,
  // 新增image字段存储图片链接
  image: String
});

const Product = mongoose.model('Product', productSchema);

module.exports = Product;

• 第二步：调用Product.insertMany或者Product.create插入数据时，直接填入你从谷歌获取的图片的直链地址即可

Product.insertMany(
  [
    { name: 'Shoe one', category: 'Shoes', price: 3599, image: "你获取的鞋子图片的公网链接" },
    { name: 'Shirt one', category: 'Upperwear', price: 380, image: "你获取的衬衫图片的公网链接" },
  ],
  (err) => {
    if (err) console.log('error');
  }
);

• 第三步：React前端展示直接调用字段即可，示例代码：

// 假设你已经从接口获取到了products数组
function ProductList() {
  return (
    <div className="product-list">
      {products.map(product => (
        <div key={product._id} className="product-item">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>分类：{product.category}</p>
          <p>价格：{product.price / 100} 元</p>
        </div>
      ))}
    </div>
  )
}

方案二：存储Base64编码的图片（仅适合小尺寸图标类资源，不推荐大图片使用） #

如果不想用公网链接，可以先把本地下载好的图片转成Base64字符串，插入时直接把Base64字符串赋值给image字段即可，Schema不需要额外修改，前端使用时同样可以直接把Base64字符串作为img标签的src属性值。

注意：MongoDB单个文档最大容量为16MB，大图片转Base64后体积会膨胀30%左右，非常占用数据库存储空间，也会拖慢接口响应速度，不推荐批量使用。

注意事项 #

• 如果谷歌的图片存在防盗链限制无法直接在前端展示，可以将图片下载后存到你自己的静态资源服务，再用自己的服务的链接填入image字段即可。
• 如果后续需要支持用户上传图片，优先使用对象存储服务存储图片后保存URL到数据库，不要直接将图片内容存到MongoDB。

内容的提问来源于stack exchange，提问作者Satyam Gupta