Mixed Content Warning Error on SVG Images in Next 11

[surjithctly]

Describe the bug
When using an SVG image in <Image/> it throws mixed content warning error in Next 11.

Mixed Content: The page at 'https://site.netlify.app/' was loaded over HTTPS, but requested an insecure image 'http://site.netlify.app/img/graphic.svg?url=%2Fimg%2Fgraphic.svg&w=1920&q=75'. This request has been blocked; the content must be served over HTTPS.

I have created a demo to replicate the issue, the SVG is not loading, instead of throwing 502 error this time.
https://nostalgic-mcnulty-ff9b66.netlify.app/

To Reproduce
Steps to reproduce the behavior:

1. Create new Next 11 App
2. Add <Image/> with src pointing to an svg file (*.svg)
3. Upload to Netlify.app
4. See the error in the console.

Expected behavior
It has something to do with HTTPS to HTTP error,

Versions

• Next.js: 11
• plugin : 3.6.0

[varayoudfederico]

We are having the exact same problem.

[ascorbic]

The error on that site is because you're deploying from your local machine, and pushing your local sharp module:. Do you have a build deployed from a build on the Netlify server?

See https://nostalgic-mcnulty-ff9b66.netlify.app/nextimg/%2Fimg%2Fbg-graph.svg/1920/75?url=%2Fimg%2Fbg-graph.svg&w=1920&q=75

[surjithctly]

@ascorbic Thanks.

I was now able to replicate the Mixed content issue.

Demo: https://dazzling-lamarr-f47862.netlify.app/
Repo: https://github.com/surjithctly/netlify-svg-test

[Garee]

I also experienced this issue. The following meta tag can be used as a workaround in the meantime:

<meta
  httpEquiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
></meta>

[nitindutta5]

I also experienced this issue. The following meta tag can be used as a workaround in the meantime:

<meta
  httpEquiv="Content-Security-Policy"
  content="upgrade-insecure-requests"
></meta>

Thanks :) That helped. I was still facing this issue.But yeah this one worked for me.

[surjithctly]

@nitindutta5 This has been fixed in v3.6.1, so it will be good if you upgrade the package instead.

[evojewel]

@surjithctly, Is there an option to upgrade the plugin from the UI? I uninstalled and installed the plugin but it didn't work. I was still getting the "Mixed content" warning error.

I ended up using the meta tag workaround.

[surjithctly]

@evojewel You can install this plugin in your project root, then netlify will use that instead of default (old) version.