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


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/
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

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

For example with the sea image it’s trying to load it from

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.


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:
image: images/sections/achievements/aces.png

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.


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

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;

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 :grinning:

@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