문제
supabase storage에 이미지 링크를 생성해서 class 테이블에서 해당 값에 배열로 넣어두었는데 업로드한 이미지가 불러와지지 않는다.
// supabase storage에 등록한 이미지 업로드
const uploadFile = async (file: File) => {
const cleanName = cleanFileName(file.name);
const filePath = `uploads/${classId}_${cleanName}`;
console.log('File Path:', filePath);
const { data, error } = await supabase.storage
.from('classImages')
.upload(filePath, file);
if (error) {
console.error('파일 업로드 실패:', error);
return null;
} else {
const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/classImages/${data.path}`;
return url;
}
}
TypeScript
복사
해결
filePath에 생성하는 uploads부터 되어있고 정작 중요한 버킷이름이 빠져있었다..!(현진님 아니였으면 몰랏을..)
const filePath = `uploads/${classId}_${cleanName}`;
TypeScript
복사
const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/${data.path}`;
TypeScript
복사
그래서 해당 스토리지의 버킷 이름을 경로에 추가해주니 정상적으로 데이터가 잘 불러와지는 것을 볼 수 있었다
const url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/classImages/${data.path}`;
TypeScript
복사
