Html Question posted in
Some basic documentation can be found here.

Html – Using google drive link as img src on React app not working

I’m working on a React app using a Google Drive link as the src for an image. The link has this format:

https://drive.google.com/uc?export=view&id={{imageId}}

It was working fine, but it suddenly stopped working. The link is still public, and I’ve tested viewing the image in different browsers and using incognito mode.

When I make a GET request to the link from the React app, I receive a 403 error. Also, on chrome I see this warning:

Error with Permissions-Policy header: Unrecognized feature: ‘ch-ua-form-factor’.

Any hints on how to resolve this and why it suddenly stopped working?

I tried with other images, setting policy headers using meta tags in index.html, and also setting referrerPolicy="no-referrer" on the image, but still not working.

Tags:

2

Answers


  1. 0

    Related to this quesion, just enter your image ID into this link instead:

    https://drive.google.com/thumbnail?id={{imageId}}&sz=w1000
    Login or Signup to reply.
  2. 0

    I had the same problem.

    I have an application developed in React and it suddenly stopped working (I don’t know why).

    SOLUTION:

    If you are importing the image from Google Drive in this way:
    <img src={https://drive.google.com/uc?export=view&id=${IMAGE_ID}} alt={NAME}/>

    Import it in this other way:
    <img src={https://drive.google.com/thumbnail?id=${IMAGE_ID}} alt={NAME}/>

    I leave you the function that I use to normalize the Google Drive link and leave it correctly ready to use in the application:

    export const **getImage** = (rawURL: string) => {
   const RAW_URL1 = rawURL.split("/d/");
   const RAW_URL2 = RAW_URL1[1].split("/view");
   const IMAGE_ID = RAW_URL2[0];
   return `https://drive.google.com/thumbnail?id=${IMAGE_ID}`;
};

    I hope it helps you!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search