Hello there,
I recently put together my portfolio website, added all the necessary images to my Google Drive, and used the public URL as the src value in the <img /> tag.
Initially, the images were loading without any problems. However, I'm now experiencing issues where the images are not loading in both development and production modes. I've been struggling to identify the root cause of this problem.
Here are some troubleshooting steps I've taken:
- When I directly call the image from the 'public' folder, it loads correctly. But when I try to load the same image from my Google Drive using its public URL, it fails to load.
- I double-checked to ensure that the image on my Google Drive still exists and that its access permissions are set to public.
- I also verified that the images configuration for the Google Drive domain is properly set in my 'next.config.js' file, even though I'm using
<img />instead of<Image />. - Using
<Image />successfully loads the image, but switching all instances of<img />in my source code to<Image />and including width and height values for each image seems like a cumbersome workaround. - I scoured the internet for possible causes and solutions, but unfortunately came up empty-handed.
You can visit the website at , and access the source code via this link: https://github.com/favoursyre/portfolio_frontend.git
If anyone could offer insights into the issue and suggest possible solutions, I would greatly appreciate it.
Thank you and best regards