reactjsnode.jscookiesgoogle-drive-api

Google Drive API | Third-party cookie will be blocked. Problem with inserting a url-link into the src attribute of the img tag

I need get a Google drive image to the site. I have a public link: https://drive.google.com/file/d/1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN/view?usp=drive_link. //It opened without problems on others accounts, so i hope it's public.

In all the tutorials I read, I saw that I needed a direct link, so I converted it to this: https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN.

By inserting it into the src attribute, I got the same problem:third-party cookie error in the console

I’m a novice developer, so I’m not particularly aware of how to properly dispose of cloud storage, perhaps this link-based method is no longer used, that’s what I saw article https://developers.google.com/privacy-sandbox/3pcd?hl , probably this is not particularly related to the problem, but that’s just my guess. I also understand that there are ways to avoid using a url link, but I wonder why it's not working. (obviously because I’m dumb, but nevertheless...)

Here’s the code where I use this url:

<Avatar // not <img>, but problem the same with both tags
      alt={username}
      src={`https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}
      sx={{
        height: "150px",
        width: "150px",
        position: "relative",
        top: "12%",
        zIndex: "1",
      }}
></Avatar>

I tried to use the url in many different formats, but it works only when I'm manually entering the link into this site: https://ww.labnol.org/embed/google/drive/ . But there is no an open api on this site, so I refer here for advice. If it turns out that there is no way to solve this problem, I would welcome alternative approaches to this task. Sorry for my english.

Solution

  • How about modifying your showing script as follows?

    From:

    src={`https://drive.google.com/uc?export=view&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}

    To:

    src={`https://drive.google.com/thumbnail?sz=w1000&id=1-CzE1D-U9QZaobPOr--NAb4EPHPJD4iN`}