Why Doesn’t My Modified Google Drive URL Load an Image in React?

These are the possible solutions I would suggest:

• Check your Django backend and be sure it is correctly configured to handle cross-origin requests for Google Drive images.
• Use direct download link by modifying the image URL to the one below:

JAVASCRIPTCopied
const imageUrl = `https://drive.google.com/uc?id=${driveFileId}&export=download`;

• Check image permissions and confirm the Google Drive file is set to "Anyone with the link can view".
• Alternatively, you may use Django to proxy the image download instead of direct client-side linking.

One of the above should resolve the issue or you'll need to share more details about the error.

I'm a big fan of ExpressJS, so my solution would be to create a server that downloads your files (you can also make something like this in your mentioned Django backend):

JAVASCRIPTCopied
const express = require("express");
const https = require("https");
const cors = require("cors");
  
const app = express();
app.use(cors());
  
app.get('/image', (req, res) => {  
  
    const fileId = req.query.id;
    if (!fileId) {  
        return res.status(400).send("Please add image ID");
    }  
  
    const fileUrl = `https://drive.usercontent.google.com/download?id=${fileId}&export=view&authuser=0`;
  
    https.get(fileUrl, (response) => {  
  
        res.setHeader("Content-Type", "image/jpeg");
        response.pipe(res);  
  
    }).on("error", (err) => res.status(500).send("Download error"));  
  
});  
  
app.listen(3001, () => {  
  console.log("Server running on port 3001");  
});  
  

This code creates a very basic HTTP server running on localhost:3001.

Requesting localhost:3001?id=yourImageId will get a response of an image (using a link template slightly different than yours).
Next, you need to update your client to download the image and create its Object URL (provided you already have the ID) and finally use the React state system to place the Object URL into the image src:

JAVASCRIPTCopied
export default function FileDisplay() {  
  const driveFileId = '1pYzwc1GOkO_HcKFuNdOBXd6XriFsIYec';
  
  const [imageUrl, setImageUrl] = useState<string>();  
  
  useEffect(() => {  
      fetch("http://localhost:3001/image?id=" + driveFileId)  
         .then((res) => {  
             if (res.ok) return res.blob();  
             throw new Error("Error during image download");  
         })  
      .then((blob) => {  
        const objectUrl = URL.createObjectURL(blob);  
        setImageUrl(objectUrl);  
      })  
      .catch((err) => console.error(err));  
  }, []);  
  
  return (  
    <img src={imageUrl} alt="Drive image"></img>  
  );  
}