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

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

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.

screenshot-20220607-161208

It’s likely you just need to change that.

2 Likes

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

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.

2 Likes

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

none of my images are showing after deploying :frowning_face:

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