Render Multiple images Supabase答案

【问题标题】：Render Multiple images SupabaseRender Multiple images Supabase
【发布时间】：2022-01-05 13:11:52
【问题描述】：

我正在尝试从我的超级数据库和存储桶下载图像。每个帖子都会上传多张照片并获得自己的文件夹 ID，其中存储了图像。然后，我将图像的路径名上传到数据库，这样我就可以为下一页的帖子获取相应的照片。我的问题是我无法将正确的照片渲染到正确的帖子

atm 的工作原理

1.useEffect 从 Db 下载所有图片
2.我需要将这些img Ids与DB表中的IDS进行匹配才能渲染照片§

下载 fnc

const downloadImage = async (path, imgPath) => {
return await supabase.storage
  .from("public/job-photo")
  .download(`jobcomplete/${path}/${imgPath}`)
  .then(({ data, error }) => {
    if (error) throw error;
    return URL.createObjectURL(data);
  });

组件

export default function Projects({ dataFetch, downloadImg, header, desc }) {
  const [urls, setUrls] = useState([]);
  // Fetch all URLS when the component mounts:
  console.log(urls);

  const postImgRender = () => {
    if (urls.some((e) => e.id === "q-kwhu8nkq")) {
      console.log(e, "Here");
      /* vendors contains the element we're looking for */
    }
  };

  useEffect(() => {
    if (!dataFetch) return;
    dataFetch.forEach((item, i) => {
      for (let i = 0; i < item.imgPath.length; i++) {
        const newImage = item.imgPath[i];
        downloadImg(item.genid, newImage).then((url) => {
          let imgObj = {
            id: item.genid,
            imgPaths: url,
          };
          setUrls((prevState) => [...prevState, imgObj]);
        });
      }
    });
  }, []);

  return ( ect.....

JSX

{dataFetch ? (
    <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
      {dataFetch.map((item, i) => (
        <div
          key={item.genid}
          className="flex flex-col rounded-lg shadow-lg overflow-hidden"
        >
          <div className="flex-shrink-0">
            {urls.map((url, i) => {
              if (Object.keys(url.id) === item.genid);
              return <img src={url.imgPaths} />;
            })}
          </div>

尝试确定这是否是正确的方法可能会得到我不确定的密钥？

 const postImgRender = () => {
    if (urls.some((e) => e.id === "q-kwhu8nkq")) {
      console.log(e, "Here");
      /* vendors contains the element we're looking for */
    }
  };

网址 ARR

【问题讨论】：

标签： javascript reactjs next.js supabase

【解决方案1】：

我相信解决它

{urls.map((url, i) => {
                      if (url.id === item.genid) {
                        console.log("here");
                        return <img src={url.imgPaths} />;
                      } else {
                        return null;
                      }
                    })}

【讨论】：