images don't show up using <img> HTML tag - html

I set a tag to a local path it works normally on my computer BUT when I deploy it using GitHub pages services the images don't load at all
here is the code:
<ol>
<li>Go To Apperance > Menu</li>
<li>Create a new menu by clicking on create a new menu</li>
<img src="./images/social1.PNG" width="80%" alt="Social Icons">
<li>Add your menu items as <strong>Custom links</strong> in left side menu</li>
<img src="./images/social2.PNG" width="80%" alt="Social Icons">
</ol>

You should change src="./images/socialX.PNG" either to an absolute path or given that you opt for relative paths and under the assumption that the images directory is placed inside your website's repository, then its name should be prepended to form the final relative path src="/repo_name/images/socialX.PNG".

I checked your repository.
Your used relative path correctly, but you missed spell.
In URL, case is sensitive. Your folder name is "Images", but you tried "images", That's why your code not working.
For example, Try https://ryadh020.github.io/HireMe-theme-doc/Images/front1.PNG instead of https://ryadh020.github.io/HireMe-theme-doc/images/front1.PNG.

Please make sure you upload the images as well.
and the link URL is accurate to its file, (I am not sure where the dot is referring, maybe try removing it or add two dots).
Hope you found this helpful :)

Related

Getting an error when linking contact form in html i have tried everything

<nav class="Navbar">
<ul>
<li>
<a href=“index.html”>Home</a></li>
<li>
<a href=“contact.html”>About</a></li>
<li>
<a href=“Services.html”>Services</a></li>
<li>
<a href=“Contact.html”>Contact</a></li>
This is the error i get
Cannot GET /%E2%80%9CContact.html%E2%80%9D
The contact form you saved as "contact.html", check that the page can load independently and please check if it is saved in same folder as your document. You might want to get its src/ folder.
close your </ul> and </nav>
check your link and learn about relative and absolute links. a url will solve that problem if it is remote. if its local, make sure its not in a different directory.
check this page out
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
i bet one of those 2 things helps. keep us posted

Return to the homepage and move to the section

the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.

Logo as home link

So, I'll try to keep this short. I am making a navigation and I want my logo to act as the homepage link. Like this:
However, I'm having trouble with it. Any help would be appreciated!
Code at codepen:
`http://codepen.io/aaronmtx/pen/NRYqOm`
Is the codepen for an example or is that the site you are talking about that should be working?
To make a logo a homepage link you just put an href around the image and set the path to "/".
Example:
<img src="images/example.jgp" />
In your codepen, the # sign in the links is a standard kind of "change me later with the right path" symbol that just links to the top of the current page. You need to change all of those to be a path. / is your root or home page. Anything after that will navigate to other pages.
So you will end up with / for the home page, /services or /services.html etc. depending on your folder and file names.
<nav>
<ul>
<li class="nav-logo"><img src="http://baseframe.co/a/img/White-B.png"></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
This would make the image a link and upon click it would navigate to the root. Obviously replace your image with the correct logo path.
If that doesn't help, can you clarify by adding your code with file names and folder structure?
Hope this helps!

picture won't render on page HTML relative path- using foundation and rails

this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".

Anchor tag within div and ul won't work

I am playing around with an HTML template. I made a un-ordered list that enables the visitor to choose between two languages. Within it, i placed an anchor tag, and within the tag an image corresponding to chosen language, accompanied by some text. Though i have don't this before, for some reason, when i try to test the page on Firefox or Chrome the anchor tag won't work. Any suggestions? Thank you in advance for your time.
Code:
<div class="polyglot-language-switcher" style="margin-top:10px;float:right;">
<ul>
<li style="display:inline;margin-right:2px;"> English (US)</li>
<li style="display:inline;"><img src="images/gr.png" alt="Greek"> Ελληνικά</li>
</ul>
</div>
EDIT:
I do not know, if this has any value, but i initially copied the code from this site http://www.ixtendo.com/polyglot-language-switcher-2/. But i only copied the HTML bit.
Just Download the Zip file from this link
https://github.com/ixtendo/Polyglot-Language-Switcher/archive/master.zip
and extract it and open the index.html file.... that is what you want.