Next.js Discord

Discord Forum

Display images linked from http or https when deployed on Vercel

Answered
Chinese softshell turtle posted this in #help-forum
Open in Discord
Chinese softshell turtleOP
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?
Answered by Ray
import Head from 'next/head'

return (
  <Head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  </Head>
)
View full answer

49 Replies

@Ray try js images: { remotePatterns: [ { hostname: "tomasburian.com" }, ], },
Chinese softshell turtleOP
Thanks for the reply. Unfortunately it still gives the same error.
Chinese softshell turtleOP
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.
@Chinese softshell turtle 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.
Ray
try add this to metadata
export const metadata: Metadata = {
  other: {
    "Content-Security-Policy": "upgrade-insecure-requests",
  },
};
Chinese softshell turtleOP
That goes into the layout file?
Chinese softshell turtleOP
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.
Chinese softshell turtleOP
I'm not using the app router, I'm using pages router
then put this in your page
Ray
import Head from 'next/head'

return (
  <Head>
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  </Head>
)
Answer
@Chinese softshell turtle I'm not using the app router, I'm using pages router
Ray
or _app.tsx if you use that image in multiple place
Chinese softshell turtleOP
#Unknown Channel
<Head>
<meta
http-equiv="Content-Security-Policy"
content="upgrade-insecure-requests"
/>
</Head>
<Layout>
<SessionProvider session={pageProps.session}>
<Component {...pageProps} />
</SessionProvider>
</Layout>
</>
Like this?
Chinese softshell turtleOP
That didn't work, I tried to put it everywhere else as well.
@Chinese softshell turtle That didn't work, I tried to put it everywhere else as well.
Ray
maybe try changing to this
<meta
    name="Content-Security-Policy"
    content="upgrade-insecure-requests"
  />
Chinese softshell turtleOP
It works but the pictures still don't show
This shows up in the console
Mixed Content: The page at 'https://mclaren-store-dashboard.vercel.app/dashboard/products' was loaded over HTTPS, but requested an insecure element 'http://tomasburian.com/dev/cdn/mclaren-store/02.jpg'. This request was automatically upgraded to HTTPS
Chinese softshell turtleOP
No, but you can see the source code
I have a repo that's public
It won't log you in with GitHub account?
@Ray hmm it works for me https://traefik-nine.vercel.app/
Ray
do you see the image load from here?
Chinese softshell turtleOP
Yes
did you use the Image component?
@Chinese softshell turtle did you use the Image component?
Ray
yes
  <Image
        src="http://tomasburian.com/dev/cdn/mclaren-store/01.jpg"
        alt=""
        height={500}
        width={200}
      />
Chinese softshell turtleOP
that's very interesting
Ray
i saw too many redirect on your link
Chinese softshell turtleOP
wow
Ray
let me test it with page router
Chinese softshell turtleOP
Ah!
now it works
I was using the http img component
Now I switched to Image from Next
Ray
what is http img component lol
Chinese softshell turtleOP
I rebuilt the page so it should now be fine
Ray
yes it works
Chinese softshell turtleOP
just the regular <img> fragment
Ray
oh ok
Chinese softshell turtleOP
This is awesome
Thanks a lot!
Ray
no prob