Images do not present on Netlify after deploying, but they work well on the local host

@quynh-vo-le Sorry I actually stuffed up myself!

In my last post I had accidentally written the values as if they were JavaScript strings instead of CSS.

I’ve fixed it in the previous post :slightly_smiling_face:

Note: You don’t need them now that you’ve changed the aspect ratio for that area though!

Thank you very much for your help and the information :slightly_smiling_face:

1 Like

none of my images are showing after deploying :frowning_face:

1 Like

Hey there, @Mmesoma-Constance :wave:

Thanks for reaching out. Sorry to hear you are stuck! Before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console

hello,
please i also need some help. I,'m a newbie. firstly i had a really though time uploading my work on netlify, but i did eventually and now the image to my first ever project refused showing after being deployed. I’ve read about changing the directory of the image but i still dont know how to go about it.
https://tired-mehn.netlify.app/

@joeshuwa The image file in your repository isn’t in the same location as the src reference in the HTML.

Location referenced in the HTML…

Files in the repository…

You can see that your image is here (which matches the location in the repository):
https://tired-mehn.netlify.app/challenge1.jpg

So you can fix it by either…

  1. Moving the image file location to match the src
    Move the file to images/challenge1.jpg
    or
  2. Adjust the src to match where you currently have the image file.
    Change the src to src="/challenge1.jpg"
1 Like

Thanks alot @nathanmartin i’ve been able to rectify the issue with your assistance.

1 Like

@joeshuwa yay! Thanks so much for letting us know you were able to resolve your issue

Hello,

This is my first time deploying a project on Netlify. Everything is going well, except for the images. They don’t show up. Can someone help me with that?

https://login-vertigo.netlify.app/
repo: GitHub - elizamsalles/login-page: This is a login page created from #boracodar project.

@elizamsalles I can see that you’re using Vite, so you should take a look at their documentation regarding Static Asset Handling.

If you run your current build locally with npm run build and look into your dist folder, you will find that it doesn’t contain any of the image assets that you have in your src/assets folder, which is why they don’t show up on Netlify.

What does your build/deploy log say?

Hi similarly I am also facing the same error that the background image is not shown even though the image is working in my local environment how to solve that issue can you please help me to Dubuque that I am facing that problem only in the deployment process this is my GitHub link:- GitHub - Ayush433/React-Portfolio and the background image is inside the tailwind.config can you please help me to solve this

@ayush1 You are using Vite, so your issue is the same as many others using Vite.

You haven’t read or understood the applicable documentation for Vite.

Vite isn’t magic and it won’t work with whatever random project structure you throw at it.

You should read the Vite Static Asset Handling Documentation, in particular the section concerning the Public Directory.

Note: Anyone else encountering this thread that is using Vite and has an issue with images, favicons, or _redirects files (or other static assets!) not showing up in their deployed site, should just read the documentation linked.

I’m having the same similar issue .but mine is next js most of my images in the hero section are not displaying even my tailwind css responsive is not displaying the way it is displayed locally on my localhost …
https://yulav.netlify.app/

@jennifer-pecky I can’t see any obvious issue with your site, but if you haven’t fixed it you should probably create a new thread of your own to get assistance.

It’s probably something simple, but I don’t help with Next related issues due to the middleware and added complexity of the system.

@nathanmartin hey, can u help me? my images don’t appear when i did the deploy, some images are ok and appear, but others images do not appear or are corrupted. The link of site is https://elaborate-gnome-d9c800.netlify.app/
I’ve tried to change the path of images, but this didn’t work

@alihps When seeking assistance you should create your own thread, this one is more than a year old.

I can’t help you, outside of providing a pointer that whatever you’re working with appears to be generating transparent images.

Which you can see here:

With the image itself being at:
https://elaborate-gnome-d9c800.netlify.app/static/media/ash-pikachu.fec3d030cce346314ef4.jpg

Remembering that if there was nothing there, it would be return a 404:
https://elaborate-gnome-d9c800.netlify.app/this-is-a-broken-image-link-example.jpg

Hi @nathanmartin, I’m facing a similar issue as almost everyone here. I deployed a tailwind CSS and HTML project on Netlify. However, the images do not come up as they are on my local host. I tried everything I could. Please help me resolve this.
Github link: GitHub - TubiOb/Incover_Receipt
The whole codebase is in the build folder.

@TubiOb My wild guess is that you just aren’t deploying the images:

Your images are in build/assets, but you’re probably deploying build/public.

Only the files in the Publish directory get deployed.

Your reference to ../assets/Insurance provider card.png for example would exist locally, but not on Netlify.

Make sure whatever files you want to deploy are in your Publish directory and that your file paths are set accordingly.

2 Likes

I discovered that was the issue, and I have rectified it. Thank you so much for the help, Nathan.