Code showing correctly in preview, but not actual page?

https://github.com/fintechntrusts2020/Replica-Economics , I have another post where I’m still having issues with inserting images, however, now my bullet points are not correct as they were. Help?

Can you post a direct link to the page you’re having trouble with and maybe share a screenshot of what the issue is/what it’s meant to look like?

Preview page link; https://github.com/fintechntrusts2020/Replica-Economics/blob/532f492f3fecd0bba1f3b92388968a7a28fb60df/_pages/origin.md

However, below is the link to the live page and it shows a broken image

This is the current command for the image <“img src=”/images/demo/meeting.jpg">

Thanks for posting those links! The reason this is happening is because of a relative path issue with how the browser loads this image file on GitHub.com compared to on your Pages site. Looking at the code for this image:

<img src="/images/demo/meeting.jpg">

The source for this image starts with a / character. This tells the browser to search for the image file starting at the root of the domain. When you’re browsing GitHub.com this means it will look in the root of the repository then follow the file path to the correct file.

However, on your Pages site, there’s an extra element that’s required in your URL—the repository name Replica-Economics.

The actual URL that your image is loaded from is this:

https://fintechntrusts2020.github.io/Replica-Economics/images/demo/meeting.jpg

However, currently the browser is looking for it at this URL:

https://fintechntrusts2020.github.io/images/demo/meeting.jpg

This is happening because the initial / character is telling the browser to look for this path at the root of the domain (https://fintechntrusts2020.github.io/), instead of looking for this path relative to the current open page (https://fintechntrusts2020.github.io/Replica-Economics/), meaning the browser will leave out the required Replica-Economics “directory” in the URL.

To fix this you’ll simply need to remove the / character from the beginning of the image’s source path:

<img src="images/demo/meeting.jpg">

If you’re having other issues with images like this it’s likely that there’s other relative pathing issues causing similar problems!

Hey there thomas, yes your advice worked. However, the link is now broken on the preview, is that purely because of a relative pathing issue? If so, where my be a logical area to begin troubleshooting? Index, config, etc?

Oop, I missed this part during my testing, sorry! :see_no_evil:

Looks like there is a way to fix it for both at the same time. You’ll first need to convert this img tag to a markdown image tag, and add back in the initial /:

![](/images/demo/meeting.jpg)

Then you’ll need to make sure you set your baseurl to the name of your repository inside your _config.yml file:

baseurl: /Replica-Economics

Once you do both of these your image should show up correctly on both GitHub and on your website!