NextJS Image component throwing mixed content errors with relative src

The site I’m working on is: https://www.moodtracker.org/

You’ll notice that images don’t load. Due to this error:

Mixed Content: The page at 'https://www.moodtracker.org/' was loaded over HTTPS, but requested an insecure image 'http://www.moodtracker.org/img/brand--moodtracker-logo--image.svg?url=%2Fimg%2Fbrand--moodtracker-logo--image.svg&w=64&q=75'. This request has been blocked; the content must be served over HTTPS.

The source code looks like this:

import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import Nav from "./Nav.js";

import styles from "./Theme.module.scss";

const Theme = ({children}) => (
    <>
        <Head>
            <title>Mood Tracker - Help for depression, anxiety, and bipolar disorder</title>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <meta name="Description" content="MoodTracker.com can help people with depression, anxiety, and bipolar disorder manage medications using graphical mood charts, a mood journal, text-message reminders to take medications, and wellness team sharing."/>
            <meta name="keywords" content="mood,tracker,help,depression,anxiety,bipolar,disorder"/>
            <link rel="canonical" href="https://www.moodtracker.org/"/>
            <link rel="shortcut icon" href="/img/brand--moodtracker-logo--image.svg"></link>
        </Head>
        <div className={styles.themeMain}>
            <Link href={"/"}>
                <div className={styles.themeLogoContainer}>
                    <Image
                        src="/img/brand--moodtracker-logo--image.svg"
                        alt="Mood Tracker Logo Image"
                        width={30}
                        height={30}
                    />
                    <Image
                        src="/img/brand--moodtracker-logo--text.svg"
                        alt="Mood Tracker Logo Text"
                        width={300}
                        height={40}
                    />
                </div>
            </Link>
            <Nav/>
            {children}
        </div>
    </>
);

export default Theme;

I’ve read the NextJS Image Component documentation and I don’t think I’ve set it up wrong. It works on localhost just fine. I’m wondering if my Netlify configuration is not quite right. Any help would be greatly appreciated.

@noctufaber Welcome to the Netlify community. Are you still seeing this error? I don’t see it when I visit your site.

Yes, I’m still seeing the problem. If I run it on Chrome, Firefox, Brave, or Edge, I get the errors in the console and the broken images in the browser viewport. However when I test it on Safari on my MacOS desktop it works fine.

Do you have any redirects or functions that could be causing this? The code is almost too simple for it to be fouled up.

Sorry, no. I don’t have any redirects or functions. It’s pretty perplexing. I’ve gone through my Netlify settings a few times and nothing appears to be out of the ordinary, but I’ll admit I’m new to Netlify, so it’s possible I’ve misconfigured something somewhere.

Hi @noctufaber ,

Your URL is https://www.moodtracker.org/_next/image?url=%2Fimg%2Fbrand--moodtracker-logo--text.svg&w=640&q=75 so I am guessing you are using @next/image?

The @next/image docs (see #loader section) might help you out, but I suspect there is a non-https URL reference in your configuration somewhere (ie. your site is HTTPS which is then trying to load the image over HTTP ergo mixed content warning.)

Well, I think I figured it out. The images I was trying to get to work were SVG images and they aren’t compatible with the NextJS <Image> component. Since the images are tiny already, I just referenced them by the regular html <img> tag. I then setup a jpg image on the home page to see if I could get that to work and yeah, it works.

The mixed-content error message was very misleading and sent me on a wild goose chase.

Thanks for the help everyone.

Oh, and by the way, this documentation was really helpful for me: GitHub - netlify/netlify-plugin-nextjs: A build plugin to integrate Next.js seamlessly with Netlify

2 Likes

Thanks for coming back and sharing that, @noctufaber! Your knowledge sharing will definitely be beneficial for future Forums members who encounter something similar. :netliconfetti:

1 Like