I use next/image, the domain name of the image address returned to me by my interface is https://xx.com, and I assign the value to src, but actually when I view the dom in the browser, src displays http://xx.com, but the browser console also loads https when loading. This is why
#http and https
dusky quiver
fathom tinselBOT
Hi @dusky quiver. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The behavior you're experiencing might be related to how Next.js handles image optimization. When you use the next/image component, Next.js optimizes the image on the server-side or at build time. The optimized image is then served from the Next.js Image Optimization API.
If you're using an absolute URL for the src prop, you might want to ensure that you've correctly configured the remotePatterns in your next.config.js file. This configuration is necessary to protect your application from malicious users and to ensure that only external images from your account can be served from the Next.js Image Optimization API.
Here's an example of how to configure remotePatterns:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'xx.com',
port: '',
},
],
},
}
This configuration will ensure that the src property of next/image must start with <https://xx.com.> Any other protocol, port, or unmatched hostname will respond with a 400 Bad Request.
If you're still experiencing issues, it might be helpful to check any proxy settings or server configurations that might be altering the protocol of your image URLs.
For more information, you can refer to the Next.js documentation on Image Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/images#remote-images) and remotePatterns (https://nextjs.org/docs/app/api-reference/components/image#remotepatterns) configuration.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
dusky quiver
@dusky quiver I'm pretty sure I've set up remotePatterns, you know, my interface returns https, I assign src, but checking the element through the browser, src says http, but it loads with https
@fathom tinsel I'm pretty sure I've set up remotePatterns, you know, my interface returns https, I assign src, but checking the element through the browser, src says http, but it loads with https
fathom tinselBOT
Let me check the knowledge base for you. One moment! :books:
The behavior you're experiencing might be related to how the browser or Next.js handles the src attribute of the next/image component. When you inspect the element in the browser, it might show http in the src attribute, but the actual network request could still be made over https.
This could be due to the way Next.js handles image optimization. When you use the next/image component, Next.js optimizes the image on the server-side or at build time. The optimized image is then served from the Next.js Image Optimization API.
If you've correctly configured the remotePatterns in your next.config.js file and your interface returns https, then the image should be loaded over https. The src attribute in the DOM might not reflect the actual protocol used for the network request.
If you're still experiencing issues, it might be helpful to check any proxy settings or server configurations that might be altering the protocol of your image URLs.