#Display images linked from http or https when deployed on Vercel

51 messages · Page 1 of 1 (latest)

formal leaf
#

Hello, I'm downloading an array of products from my DB and want to display their images that are linked to an external web (each product has an img attribue with the link). It works fine when I do it on localhost but once on Vercel, the images return 404. Is there any way around it? Seems like the Image component has an issue with these links fed to its src attribute.
I do have the domain added to the next config file like this:
images: {
remotePatterns: [
{
protocol: "http",
hostname: "tomasburian.com",
port: "",
pathname: "/dev/**",
},
],
},

And the links look like this: http:/tomasburian.com/dev/cdn/mclaren-store/01.jpg
So I'm not sure how to make it work. Could you guys please help?

bitter notchBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

lean island
formal leaf
lean island
formal leaf
#

It was trying to download it from https link, not the http where my pictures are stored. I tried to link it to pexels.com and it works fine because pexels is on https. So the problem was the protocol.

lean island
formal leaf
#

That goes into the layout file?

lean island
formal leaf
#

It tells me I can't export metadata from a client rendered file. I'm not using "use client" in the layout file, but I have it in the app's header so not sure if that's a problem.

lean island
formal leaf
#

I'm not using the app router, I'm using pages router

lean island
#

then put this in your page

# 
import Head from 'next/head'

return (
  <Head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  </Head>
)
lean island
formal leaf
#

<>
<Head>
<meta
http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"
/>
</Head>
<Layout>
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
</Layout>
</>

#

Like this?

lean island
formal leaf
#

That didn't work, I tried to put it everywhere else as well.

lean island
formal leaf
#

It works but the pictures still don't show

#

This shows up in the console

lean island
lean island
formal leaf
#

No, but you can see the source code

#

I have a repo that's public

#

It won't log you in with GitHub account?

lean island
formal leaf
#

Yes

#

did you use the Image component?

lean island
lean island
formal leaf
#

that's very interesting

lean island
#

i saw too many redirect on your link

image.png
formal leaf
#

wow

lean island
#

let me test it with page router

formal leaf
#

Ah!

#

now it works

#

I was using the http img component

#

Now I switched to Image from Next

lean island
#

what is http img component lol

formal leaf
#

I rebuilt the page so it should now be fine

lean island
#

yes it works

formal leaf
#

just the regular <img> fragment

lean island
#

oh ok

formal leaf
#

This is awesome

#

Thanks a lot!

lean island
#

no prob