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?
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:
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
The actual URL that your image is loaded from is this:
However, currently the browser is looking for it at this URL:
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:
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!
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
Then you’ll need to make sure you set your
baseurl to the name of your repository inside your
Once you do both of these your image should show up correctly on both GitHub and on your website!