I have a website on GitHub pages. When I tried to incorporate an image in a post.md file, the image works in the GitHub, but not in the website.
I wrote  in the Markdown file and it looked good when I saw the preview of changes. However, when I look at the website I've created, it doesn't work and shows a question mark like this:
Related
I am working with iPad and using some random HTML online editor. I explain to my pupils HTML coding and how to include photos on a webpage. How do I store images for my webpage and what is the path in my HTML code if I am working in online editor? Is it still possible to display images or it cannot be done in online editor but it has be done with the use of HTML coding programs installed on a computer?
You can display images. Make sure you have the image in a directory in the editor or as the same directory as your main HTML file in.
I recently started my first HTML project with the help of Youtube. I'm a beginner and only saw the basics of Javascript in college.
Just finished writing my HTML project and wanted to upload it for free using Google Drive and drv.tw.
The only problem is that certain images and icons do not load (irregularly) enter image description hereand/or the pages on the navigation bar take too long to switch.
My question would be, is it because of the free domain or did I do something wrong in HTML?
When I open the HTML file in Safari everything works fine.
Since I'm new to the community, I don't know exactly what and how much I have to upload to get help. So have mercy on me :'D.
To help troubleshoot, use your browsers "developer" (F12) mode. Look at the Network view to see why the images aren't displayed. For example: It might be "not found", "not authorized", or other reasons.
From your comment, it would appear that at times the page is rendering before the images are available to display or something else is limiting image files from being presented at all.
Once we know why the browser can't display the images, then the cause can be addressed.
Post the .html .js and .css code
Please update your question and show the folder structure. It should look something like:
-site-
|
-js
-css
-images
Copy and paste in the code below the folder structure and list the images and their size.
I am not familiar with google drive's capabilities.
It is important to use a web host. There are plenty of free or low cost sites available, so I won't go into it.
when I go to my website directory it shows all my files and not to my landing page, is there a way to fix this? I have tried everything even looked through the internet without any clear response. I am close to finishing my website I only need to resolve this problem.
Thank you!
The issue seems to be that you are not on the HTML file, but on the folder.
To fix this issue, you have to redirect yourself to the HTML landing page.
/ar/home.html
This should show your HTML landing page correctly rendered.
Tip: Normally, the main page is called index.html by convention. This can be helpful. For example, the Live Server extension on Visual Studio Code will automatically go to index.html if the file isn't specified. Other hosting services, like GitHub Pages, also do the same.
None of the extensions, IDEs and hosting services listed above are sponsored! They are just used for the sole purpose of examples.
In conclusion, you need to go to the HTML file, instead of the folder.
I have created a html file using R markdown, and when I open it in browser, it looks exactly how I want. But if I upload the same html file in github and open there, it gives me totally different outlook.
https://github.com/syedaash/ML-Project/blob/main/ML_project.html is the link of my html doc in github, which is not I want. But if I open the html file from my local computer in a browser it's good. Why is that and what to do?
GitHub does not automatically load and render an HTML file because GitHub is about code, therefore going straight to any file will display the internals of that file, not how it would be rendered on a browser.
The HTML Preview project has a way to render HTML files hosted on GitHub, you can just append your HTML path like so and put it on your README for example:
https://htmlpreview.github.io/?https://github.com/syedaash/ML-Project/blob/main/ML_project.html
However, I would recommend that you look into creating a GitHub Page for your project, you only need to make a few changes and turn it on and you got it.
Edit: So I checked on your status #Alex and it looks like you created the GitHub Page for your GitHub profile, which is not rendering your profile properly. Maybe this tutorial from codeacademy will be easier to understand that you can get GitHub Pages rendered for EVERY repo if you wish. You can see I do that with my own simple project with its live site.
If you want to see the output of the file (what it looks like when opened in a browser, you have to enable Github pages for your repository, more here. The link you sent is just the HTML text file that you have written, not what it actually would look like in a browser. Github pages hosts the HTML text file (link you sent) so that you can actually see it in a browser window.
GitHub is to share code not to deploy website. So now you should use GitHub Pages this is my sample website Hariienesh1901 hosted by GitHub Pages. See tutorial from GitHub https://guides.github.com/features/pages/
Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.