Извлечение изображения из хранилища Supabase через таблицу базы данных возвращает неопределенный URL-адрес

Я создаю приложение в Next.js, которое извлекает динамические данные из таблицы Supabase. Таблица (называемая product) имеет несколько точек данных (название, описание, изображение). Моя таблица в Supabase выглядит так:

Моя проблема в том, что и описание, и заголовок подтягиваются динамически, правильно заполняя мою домашнюю страницу. Что не получается, так это образ. Изображения хранятся в общедоступной корзине, которая выглядит следующим образом:

То, как я пытаюсь динамически вытащить изображение, выглядит следующим образом:

import { supabase } from "../utils/supabase";
import Link from "next/link";
import { useUser } from "../context/user";
import Image from "next/dist/client/image";

export default function Home({ products, tile_url }) {
  const { user } = useUser();

  const {data:image_url} = supabase.storage.from("games").getPublicUrl(tile_url);
  console.info(image_url.publicURL);

  return (
    <div className = "body w-full h-screen py-16">
      <div className = "w-full max-w-3xl mx-auto px-2">
        {products.map((product) => (
          <Link
            key = {product.id}
            href = {`/${product.id}`}
          >
            <a className = "p-8 h-40 mb-4 rounded element text-xl flex">
             
              <img src = {image_url.publicURL} alt = "" />
              {product.title}
            </a>
          </Link>
        ))}
      </div>
    </div>
  );
}

export const getStaticProps = async () => {
  const { data: products } = await supabase.from("product").select("*");

  return {
    props: {
      products,
    },
  };
};

Изображение не возвращается в интерфейсе. console.info возвращает URL-адрес, но вместо имени изображения вставляет undefined в конец:

https://[project_identifier].supabase.co/storage/v1/object/public/games/undefined

Ожидаемый результат будет следующим:

https://[project_identifier].supabase.co/storage/v1/object/public/games/gameOneGameTile.jpeg

Любые идеи относительно того, что я делаю неправильно? Заранее спасибо!

Обновлено:

Основываясь на ответе @dshukertjr на этот вопрос, я включил путь к изображению в таблицу, чтобы иметь возможность использовать имя столбца для извлечения данных. Однако ничего не изменилось.


378
1

Ответ:

Решено

Что вам нужно передать функции getPublicUrl(), так это путь к изображению в ведре, например, так:

  const pathToImage = 'game_one/gameOneGameTile.jpeg'

  const {data:image_url} = supabase.storage.from("games").getPublicUrl(pathToImage);

Вы передаете tile_url в своем коде. Если вы хотите сохранить это таким образом, путь к изображению должен быть сохранен в вашей таблице product в столбце tile_url для каждой строки, чтобы иметь возможность отображать изображение.