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