I'd like to embed an HTML file into an MkDocs/Material page.
I'm trying something like what's below, but getting a 404 error.
Any idea of the right way to do this?
<div class="map">
<iframe src="map.html"></iframe>
</div>
For what it's worth, a link like this does work, but I'd like the option to embed it in the current page.
[Show a map](map.html)
404 error seems that map.html is located somewhere else, while [show a map](map.html) may generate correct link. map.html is relative to viewing page, so I recommend to:
get absolute url of map.html file, e.g. When you click on Show a map what is absolute URL in browser location bar?
put that absolute URL into iframe src="absolute url"
you may make the absolute url relative - based on address current address in location bar
Actually the index.md files behave differently. Relative paths work with them, but I also found a workaround for keeping it at relative paths: I went up one level to root then I used it as if it in the folder that gets generated in the site folder when you run mkdocs build See it in my sample docs here: https://agu3rra.github.io/volpy/ Link to the repo is on the top right corner.
Cheers!
Related
Im using Atom to do some homework, I am a beginner at html this is my first assignment and I am trying to make my first page, however I am having problems getting my images to show up. I got them to show up on a previous page and now I have moved on to a different page and tried to use the same and it won't show up, I even tested it on another page and it works on there, I don't understand what im missing can someone please steer me in the right direction.
img tags have a property named src. this prop should fill with path of your image. if you use absolute path, it should started with '/'.
imagine that you have a directory named 'public' and a file named 'image.png' in that directory. you can use img tag like this:
<img src="/public/image.png"/>
keep in mind that start slash is referred to the base directory of your project.
to check the path, you can inspect in your html file. open your html file in your browser. right click and select inspect (or you can press F12 and go to inspector tab if you are using firefox or chrome).
find the <img {...}/> element and check it's src prop and path url. keep in mind that the path should open the image. if that's not happening, there is a problem with your path.
So I'm having trouble with my HTML wherein I can display a picture from another site, but when I try to show a picture from my own computer the link is broken and I get a little blue box with a ? in it.
I have tried using the picture's relative path, absolute path, and putting the pic in the same folder as the html. Here is an example, where the pic is in the same folder as the HTML.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="bed.jpg" alt="bed" style="width:100px;height:38px"></body>
</html>
I have also tried this code with and without the style element. Nothing seems to be working.
If it makes any difference, I am doing this in web2py.
<img src="bed.jpg" alt="bed" style="width:100px;height:38px">
In the above, bed.jpg is a relative URL, so it will simply be added onto the URL of the current page. That will result in web2py returning either a 404 response or the HTML of the current page.
If "bed.jpg" is a static file, you should use web2py's mechanism for serving static files as described here (i.e., put the file in the application's /static folder, maybe in a subfolder for images, such as /static/images). It is also advisable to use the URL() helper to generate URLs to be served by web2py, so your HTML should look something like:
<img src="{{=URL('static', 'images/bed.jpg')}}" alt="bed" style="width:100px;height:38px">
I have an image which should be displayed on all the pages....it is working perfectly fine for all the pages except for a single page. On Inspect it shows could not load the image.
<div class="wrapper">
<img src="images/uk.png">
</div>
From the look of your code, my guess is that it appears to be a relative path problem. The page in which you cannot load the image successfully is probably in a different folder to the pages where you can load the image successfully.
<img src="images/uk.png"> is a relative link. According to that link usage, the file uk.png needs to be in the folder images, and the folder images needs to be in the same folder as the file you are trying to include the image on.
If your images folder is not a sibling of the file you are trying to include the image on, you have three options:
use ../ to navigate to the correct folder (<img src="../images/uk.png">)
use the root-relative / prefix (<img src="/images/uk.png">)
use an absolute URL (<img src="http://www.example.com/images/uk.png">)
For more information about relative paths, check out CSS Trick's article, Adobe's article, or IfYouCodeItTheyWill's article.
If you have ensured that your index file is indeed in the correct location, and your path is indeed correct, you may have a caching problem. Try holding SHIFT while clicking the refresh icon, and see if that works. If not, you can bring up your console with F12 to further debug the problem.
Hope this helps! :)
I have a URL to this link
http://www.weebly.com/editor/uploads/8/5/0/1/85017748/custom_themes/762476756986669176/files/img/home22.jpg
I am trying to use a relative path instead of an actual url. For some reason when I do this
<div class="background-image-holder">
<img alt="image" class="background-image" src="files/img/home22.jpg">
</div>
The image doesn't show, but when I use a url it shows just fine. Any ideas on what I am doing wrong? I've also tried ../files/img/home22.jpg and img/home22.jpg but neither worked.
Clearly you have a problem with your relative path, the easiet solution to fix this, is to inspect your html code and see what is the path set after that you can figure out which part of the URL you are missing. We can't really help you with the exact relative path you need, because we don't know which system CMS or Framework you are using ..
To inspect your HTML code, open your website in google chrome or firefox (you can use firebug) and right click => Inspect Element
I got a question and although I could find related information, I'm if it was exactly about what I'm wondering about.
The thing is, I got a site on http://localhost/site.
Now, when I create a link, let's say, <a href="/posts">, it links to http://localhost/posts instead of http://localhost/site/posts.
It works fine if I remove the slash (<a href="posts">), that would be the closest and maybe the easiest solution, but I'd like to know why the links ignore the folder where the file is at?
And I also would like to know if this can be fixed with .htaccess or something.
I've read that a link that begins with / makes it "absolute". So a link beginning with / is only intended to be used to link directly to the root, or to be used by sites stored at the root (in this case it wouldn't make much sense?) ?
The leading '/' at the start of the URL informs the web browser that the path given is absolute (with respect to the web server root), i.e. if you link to /posts then you know that the resulting link will be to http://www.mysite.com/posts.
If you don't supply the leading '/' (and you don't give a complete url like http://www.mysite.com/posts) then usually the url is relative, and any page given will be relatvie to the page currently being viewed.
For example:
page being viewed link url target page
------------------------------------------------------------------------------
www.mysite.com/site link.html www.mysite.com/site/link.html
www.mysite.com/site ../link.html www.mysite.com/link.html
www.mysite.com/some/other/page link.html www.mysite.com/some/other/page/link.html
www.mysite.com/some/other/page ../../../link.html www.mysite.com/link.html
The decision on whether to use absolute or relative links is entirely up to you - the advantage of relative links is that if your site moves, links between pages on your site will still work correctly (for example if your site moves to www.mysite.com/otherpath, then any absolute links such www.mysite.com/originalpath/home will no longer work.
You should see the following site for a more complete explanation of relative urls:
Relative URLs (WebReference.com)
Your site root is localhost although you assume that site is your site root. When you use / it is relative to localhost as it is an absolute link.
Try doing it < a href="../posts" >
./ Means base directory, or home
../ Means one directory up