#PNG images not showing once deployed

50 messages · Page 1 of 1 (latest)

old barn
#

So for some strange reason, my local PNG images are not being shown once I deploy my project. When I change the image to an SVG then it shows once I deploy. I haven't touched any code in my previous nextJS project and the photos aren't showing anymore as well.

unkempt mountainBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

old barn
#

Okay I guess nobody can help me

#

Vercel sucks I can’t even get any type of support

frank surge
#

try adding a bit more detail. What does the html & logs show? Does it say image not found? Are they in the public folder?

old barn
#

Yes they are in the public folder it was working then stopped working out of nowhere. I added more data to my GitHub I though that was the problem & automatically some images started showing up again on some of my sites. I think the issue is directly towards vercel. When I deployed the same project to netlify it was working perfectly fine

#

It doesn’t say image is not found it just shows a question mark in the little box

#

My html says Failed to load resources: the server responded with a status of 500()

#

My html shows the static image url but it’s not showing the actual image

opaque bridge
#

@old barn when you go to the static url in the html, does the img load?

#

what's your folder structure

old barn
#

@opaque bridge only some images load & my structure is public/images

Everything is correctly done, it just stopped working out of nowhere

opaque bridge
#

and try again

old barn
opaque bridge
#

does it 404?

#

whats your directory structure?

old barn
#

valentines-dwemo.vercel.app

#

That first heart lock image wasn’t showing up until I turned it into a svg

opaque bridge
#

hm

#

ok

#

checkign

#

@old barn you're using pages router?

# 

import handLove from '../public/images/hand_with_love.png';
import heart from '../public/images/hearlock1.svg';
import loveHeart from '../public/images/loveeee.svg';
import hotairballoon from '../public/images/airb.png';

found the problem

old barn
#

No for this project I’m using app router. Some of my previous projects are using the page router

opaque bridge
old barn
#

Oh sorry this is pages router

opaque bridge
# old barn 👀 👀

change to

import handLove from '/images/hand_with_love.png';
import heart from '/images/hearlock1.svg';
import loveHeart from '/images/loveeee.svg';
import hotairballoon from '/images/airb.png';
opaque bridge
opaque bridge
old barn
#

But the svg one works & it’s imported the first way, so why wouldn’t the others ?

opaque bridge
#

use the import statelments I gave

#

you don't put /public before an import statement

old barn
#

It failed as soon as I tried to deploy because of the changed import statement

#

& says module not found

#

When I deploy on netlify everything works… so maybe I just have an error with vercel

opaque bridge
old barn
#

Nothing is wrong with my code

opaque bridge
#

i have never used vercel

#

@old barn is there a github?

old barn
#

I updated my GitHub storage yesterday hoping that would fix the problem & it did a little

opaque bridge
#

just use pm2 "npm run start" and then use cloudflare tunnels