将 Firestore 数据存储在 mock 中

Question

目前我正在使用包含数组的模拟在我的应用程序内部分发数据（您可以在下面找到代码）。我在每个需要它的组件中遍历这个数组。

export const CASES: Case[] = [
  { id: 0,
    name: 'Diesel',
    portfolioImage: '/assets/images/portfolio/diesel.png',
    image: '/assets/images/diesel.jpg',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/diesel',
    header: 'black'
  },

  { id: 1,
    name: 'WeWork Berlin',
    portfolioImage: '/assets/images/portfolio/berlin.png',
    image: '/assets/images/berlin.jpg',
    image2: '/assets/images/wework/berlin-logo.png',
    image3: '/assets/images/wework/berlin-building.png',
    link: '/cases/wework',
    header: 'white'
  },

  { id: 2,
    name: 'Fritzhansen',
    portfolioImage: '/assets/images/portfolio/fritzhansen.png',
    image: '/assets/images/fritzhansen.jpg',
    image2: '/assets/images/fritzhansen/women.png',
    image3: '/assets/images/fritzhansen/chairs.jpeg',
    link: '/cases/fritzhansen',
    header: 'white'
  },

  { id: 3,
    name: 'Savum',
    portfolioImage: '/assets/images/portfolio/savum.png',
    image: '/assets/images/savum/savum-front.png',
    image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png',
    link: '/cases/savum',
    header: 'black'
  },

  { id: 4,
    name: 'Eskay',
    portfolioImage: '/assets/images/portfolio/eskay.png',
    image: '/assets/images/eskay.jpg',
    image2: '/assets/images/eskay/front.jpg',
    image3: '/assets/images/eskay/inner.jpg',
    link: '/cases/eskay',
    header: 'black'
  },

  { id: 5,
    name: 'Diesel Fashion',
    portfolioImage: '/assets/images/portfolio/diesel-snd.png',
    image: '/assets/images/diesel-snd.png',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/template',
    header: 'black'
  },

  { id: 6,
    name: 'Mobilia',
    portfolioImage: '/assets/images/portfolio/mobilia.png',
    image: '/assets/images/mobilia.jpg',
    image2: '/assets/images/mobilia/green.jpg',
    image3: '/assets/images/mobilia/pink.jpg',
    link: '/cases/mobilia',
    header: 'black'
  },

  { id: 7,
    name: 'Rarekind',
    portfolioImage: '/assets/images/portfolio/rarekind.png',
    image: '/assets/images/rarekind.jpg',
    image2: '/assets/images/rarekind/tube.png',
    image3: '/assets/images/rarekind/red.png',
    link: '/cases/rarekind',
    header: 'black'
  },
];

我想要的是用 Firebase 存储这个数组（而不是图像链接，firebase 存储？），以便能够将它用作一种内容管理系统来更新条目。

有没有办法将此列表插入 Firestore 并结合 Firebase 的存储而不是资产文件夹来存储图像？

如何在 init 上读取这些数据并将其存储在这种模拟中以再次自动分发？ - 甚至可以将图像存储在这样的数组中吗？

确切地说，我怎么能..

1. 从存储中获取图像及其分配的条目
2. 将此捆绑包作为单个 Case 插入到给定的模拟中

我可以实现这种方法还是有其他方法可以达到同样的目的？

Answer 1

有没有办法将此列表插入 Firestore 并结合 Firebase 的存储而不是资产文件夹来存储图像？

是的，但它可能不会像您想象的那样 100% 起作用。当您将图像上传到 Firebase 存储时，它会为您提供一个用于检索该图像的 URL。然后，您可以使用类似于您的问题的 JSON 对象将该 URL 保存在 Firebase Realtime DB 中。您的应用将需要查询 Firebase 以检索 JSON，然后对特定图像发出后续请求。

如果资产很小，您可能想要探索将图像存储为 base64 数据 URI，但性能是一个严重的问题，因此 YMMV。