Support Forums

Nextjs public folder serving http


Deploying Nextjs website worked very well, but I have the following error on my website (which is still under construction):

Mixed Content: The page at ‘https://www.smagotcha.net/’ was loaded over HTTPS, but requested an insecure image ‘http://www.smagotcha.net/logo-part.svg?url=%2Flogo-part.svg&w=64&q=75’. This request has been blocked; the content must be served over HTTPS.

The requested images are just in the public folder of Nextjs. First I got another error about HTTPS so I put the website on the Netlify DNS and got the HTTPS enabled, but now I have this error and I am not sure how to proceed. I tried pushing an update from my github which triggers a new deployment, but this did not help.

hi @roudCircle ,

is there any way you could make the link a relative link instead of an absolute one?

that would be the most appropriate solution. second to that, can you change the link to

https://www.smagotcha.net/logo-part.svg?url=%2Flogo-part.svg&w=64&q=75 (note i just changed the url to https://) and see if that works? the first is preferable, as relative links are much more portable than absolute ones.

1 Like

Thanks @perry ,

I actually assumed I was already using relative links… When linking for instance to the link you mention, this is the code that I use:



          alt="Logo appearing"




I tried the absolute path as follows:



          alt="Logo appearing"




But this did not work, getting the error:
Failed to load resource: the server responded with a status of 403 ()

Hi @roudCircle ,

You have the same issue as outlined here and here

As per the former thread on NextJS/image

A potential solution posted in the latter was

Hope this helps.


Thanks @coelmay, I changed svg’s to normal img tag and it worked without problems!