Next.js Discord

Discord Forum

Image not rendering

Answered
Specter posted this in #help-forum
Open in Discord
SpecterOP
The image is not rendering on webpage

Code :

"use client";
import Image from 'next/image';
import { useState, useEffect } from 'react';

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-white relative">
      {/* Gradient Box in Background */}
      <div className="absolute w-[95vw] h-[85vh] bg-gradient-to-b from-[#679CFF] to-[#0C60FB] rounded-2xl shadow-xl z-0" />

      <h1 className="font-grand-local text-6xl lg:text-6xl tracking-tight text-center z-10 relative text-white">
        Advancing with
        <br />
        ducation
      </h1>

      <img
        src="/Logo 1.png"
        alt="Eduvance Logo"
        className="w-48 h-auto z-10"
      />
    </main>
  );
}


I placed the logo in the same folder as the page.js file
Answered by joulev
/Logo 1.png expects the file at public/Logo 1.png not the file at the same folder as the page.js file. you have two options:

1. (not recommended) move the logo to public

2. (recommended) statically import the logo instead

import logo from "./Logo 1.png";

// either
import Image from "next/image";
<Image src={logo} />

// or
<img src={logo.src} />
View full answer

4 Replies

Answer
@strikx don't use spaces in file names
SpecterOP
Will keep in mind next time