Using Google Drive for Image Sources Not Working with next/image

[walkerbagley]

So earlier today I tried compiling my next.js app through Vercel using img tags in my code and it gave me an error telling me to use the next/image component instead. So I replaced the img tags in my code with the next.js Image tags to make this work right? Not quite, because I got a server error in my localhost saying:

Error: Invalid src prop (https://drive.google.com/uc?export=view&id=XXX) on next/image, hostname "drive.google.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Clearly a quite solvable issue, so I modify my next.config.js file to this:

module.exports = {
    images: {
        domains: ['drive.google.com'],
    },
}

However, even after this modification, I am getting the same error as before. I have spent several hours trying to figure out what might be wrong and I cannot seem to figure it out. For reference, I am passing a Google Drive image url through a custom component as an argument and then inserting that url as the src value in the Image tag. Passing the url via this method worked when I had an img tag, so I don't understand why it is not working now considering I added the drive domain to the next.config.js file as documented.

[walkerbagley]

Took some messing around, but it turns out that my next.config.js file was fine, I just needed to restart the dev server on localhost. Can't believe I didn't try that sooner considering the images were loading upon deployment through Vercel.

[gonsalomon]

Hello there! Is this the same with newer NextJS versions? I'm on 14.2.4 now.

Thanks in advance!

[Teegreat]

you can try this:

`/** @type {import('next').NextConfig} /
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "drive.google.com",
port: "",
pathname: "/uc*", // This will match the correct image URL format
},
],
},
};

export default nextConfig;
`

this also to convert the initial URL:

`// Convert Google Drive "open?id=" links to "uc?export=download&id="

const convertDriveLink = (url) => {
if (!url) return null;
const fileId = url.split("id=")[1];
return fileId
? https://drive.google.com/uc?export=download&id=${fileId}
: null;
};`

I hope this helps you