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.
