Images won't load for Next.js project

[jpryor812]

I designed my app using Figma and exported my code to GitHub and then Vercel. It creates a webpage with the proper colors and fonts, but the images WILL NOT LOAD. I’ve tried so many different things for hours and Vercel just won’t pick up my images. I’ve asked v0.dev 1,000 times and I can’t fix it. Here’s a link to my GItHub project. PLEASE HELP: nufriends_react/public at master · jpryor812/nufriends_react · GitHub

[jpryor812]

Here’s what it looks like on my screen if anyone can see it: Login – Vercel.

It also looks like the images I’m trying to reference aren’t being seen in the deployment summary. It shows 7 static assets, but none of them are my images. They’re SVG images saved in a public folder and according to several different AI tools it’s being properly referenced. I don’t know what I’m doing wrong

[swarnava (Swarnava Sengupta)]

It looks like you are requesting image from a non existent URL

[jpryor812]

How do I make it an existing URL? I thought I just have to save the image, upload the code of the image and then tell Vercel to pul that code of the image?

Thank you for responding!

[jpryor812]

import React from “react”;
import “./style.css”;

export const LandingPage = () => {
return (

<img className=“emoji-waving-hand” alt=“Emoji waving hand” src={process.env.PUBLIC_URL + “/emoji-waving-hand-sign.svg”} />

Find My Friends

Find Five New Friends in Five Minutes

Never Feel Alone Again

nufriends

<img className=“img” alt=“Emoji waving hand” src={process.env.PUBLIC_URL + “/emoji-waving-hand-sign-1.png”} />
<img className=“busts-in-silhouette” alt=“Busts in silhouette” src={process.env.PUBLIC_URL + “/busts-in-silhouette.svg”} />
<img className=“robot-final” alt=“Robot final” src={process.env.PUBLIC_URL + “/robot-final-3-1-1.svg”} />

Worried about the cold start to the conversation? Your AI Companion, who knows you best, will facilitate that
first conversation for you!

Answer a few questions to help us get to know you, and then we’ll match you with people we feel you’ll build a
connection with!

<img className=“icon-mail” alt=“Icon mail” src={process.env.PUBLIC_URL + “/icon-mail.png”} />

);
};

It looks like I’m referencing the code properly, and they’re named the same exact way in a public folder.

[jpryor812]

Hi I actually just used a different figma to next.js plug in that worked much better. All set now!