Я создаю приложение в 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 на этот вопрос, я включил путь к изображению в таблицу, чтобы иметь возможность использовать имя столбца для извлечения данных. Однако ничего не изменилось.
Что вам нужно передать функции getPublicUrl()
, так это путь к изображению в ведре, например, так:
const pathToImage = 'game_one/gameOneGameTile.jpeg'
const {data:image_url} = supabase.storage.from("games").getPublicUrl(pathToImage);
Вы передаете tile_url
в своем коде. Если вы хотите сохранить это таким образом, путь к изображению должен быть сохранен в вашей таблице product
в столбце tile_url
для каждой строки, чтобы иметь возможность отображать изображение.