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

[quynh-vo-le]

Hello,

Thank you for your support forums so that I can contact you to ask for help.
It is the first time I use R Studio, Github, and Netlify for building a blog. While I am working on the blog, things present fine locally, but images (i.e. the background image and images in another section) do not show up on the page after deploying on Netlify. May you help me to check what is the issue, please? I tried to search online for fixing the issue, but it does not work.

My Git repository: GitHub - quynh-vo-le/quynh-vo-le.github.io
My Netlify site name: Quynh's Blog

The pictures do not show on Netlify are located in:

1. config.yaml
   background: “images/site/sea.jpg”
2. data\en\sections\achievements
   image: images/sections/achievements/aces2019to2021.jpg

image: images/sections/achievements/aces.jpg

image: images/sections/achievements/ctu.png

[nathanmartin]

Some of your image references are pointing at GitHub not Netlify.

For example with the sea image it’s trying to load it from https://quynh-vo-le.github.io/images/site/sea.jpg

I’m not familiar with the system you’re using, but at the top of your config.yaml I can see there’s a baseURL property that is currently set to that GitHub site.

It’s likely you just need to change that.

[quynh-vo-le]

Thank you very much for your guidance that I can make a change so the blog can load the background and images now. However, there is still an image in the achievement section that doesn’t show up. I try to delete and load it again, but it doesn’t work. May you help me to give it a look, please?

It is located at:
data\en\sections\achievements
image: images/sections/achievements/aces.png

[nathanmartin]

You have a mix of case throughout your filenames (uppercase/lowercase) and that’s going to cause you issues.

You have the file named as aces.PNG

You have it referenced as aces.png

If you’re going to use a mix of uppercase & lowercase you have to be very careful.

Change the filename to aces.png and as a general rule try to use only lowercase in your folder/filenames where possible.

[quynh-vo-le]

Thank you very much for your help so I can solve the issue.
I will pay more attention to lower case and upper case in my folder/filenames

[nathanmartin]

It’s no problem at all.

If you don’t know why, the face in the hero area on the homepage is being stretched horizontally because the image isn’t square, but the area expects it to be.

You can fix it by adjusting the css here to include:

object-fit: cover;
object-position: top;

[quynh-vo-le]

Thank you very much for offering me extra help with the face on the homepage. It is nice for display in the home page area now.

Thank you once again for being a big help

[nathanmartin]

@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

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

[quynh-vo-le]

Thank you very much for your help and the information

[Mmesoma-Constance]

none of my images are showing after deploying

[hillary]

Hey there, @Mmesoma-Constance

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

[joeshuwa]

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/

GitHub - joeshuwa/Tired

[nathanmartin]

@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"

[joeshuwa]

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

[SamO]

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

[elizamsalles]

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.

[nathanmartin]

@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.

[SamO]

What does your build/deploy log say?

[ayush1]

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

[nathanmartin]

@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.