Отображение изображений из Firebase Cloud Firestore + Cloud Storage?

Question

Я использую Cloud Firestore (База данных) и Cloud Storage (Хранение изображений), но я не совсем точно знаю, как отображать изображения.

Вопросы:

• Правильно ли я загружаю это в Cloud Firestore?
• Я что-то упускаю с токеном доступа?

Выполненные процессы / шаги:

1. Я вручную загружал каждое изображение в Firebase Cloud Storage
2. Затем я взял место хранения каждого изображения и применил его к необходимому объекту в моем файле JSON, который выглядит следующим образом

"agency_logo": "gs://PROJECT_NAME_HERE.appspot.com/logos/CityLogo1.png",

Теперь, когда все изображения правильно сопоставлены в файле JSON и загружены, я сопоставляю импортированный JSON компонент AgencyCard React:

  // Render Logos
  const renderLogos = () => {
    return images.logos.map((logo, i) => (
      <AgencyCard
        key={i}
        agencyName={logo.agency_name}
        agencyLogo={logo.agency_logo}
      />
    ));
  };

Вот как изображение передается в реквизит:

<div id="agency-image-container">
  <img id="agency-image" src={props.agencyLogo} />
</div>

Что такое рендеринг как изображение:

Answer 1

Браузеры не знают, как загружать URL-адреса gs: //. Это специальный URL-адрес, используемый только облачным хранилищем для использования только с другими продуктами Google Cloud. Вам нужно будет сгенерировать какой-то URL-адрес загрузки https, если вы хотите загрузить его в тег img. Рассмотрим URL-адрес загрузки Firebase или подписанный URL-адрес облачного хранилища .