Problem
I have three files in two locations: html2 in a parent folder, html1 and img.png in a subfolder. I embed folder/html1 in html2 using html <embed>-tags. folder/html1 contains img.png as a relative path. When I open html1 as a stand-alone file, the image is displayed correctly. However, the image is not shown in the embedded version because the path is now interpreted relative to html2 (the image is expected in the parent folder).
<html>
<head>
<!––html2-->
</head>
<body>
<embed src="folder/html1.html">
<head>
<!––html1-->
</head>
<body>
<img src="img.png"></img>
</body>
</embed>
</body>
</html>
Question
How to make my browser show the image without moving files or rewriting the html code? Is there any way to make html automatically "rewrite" relative paths when using embed?
Considered solutions
I considered moving all files to the same folder but I find that rather unelegant. Using absolute paths is difficult because html1 is generated automatically. There must be a better solution?
The point goes to Quentin. I tried the minimum example again and it works. The relative paths are resolved correctly by default. The reason why it did not work in my (unreferenced) original code was because both html files are created by a python code that copies both to a new location but not the image. Thus there was no image in the new location and nothing to display. My bad!
#Quentin: Thanks for your comment. Made me check again. How can I give you credit?
#Carl: Thanks for the hint! I didn't know about the base tag. Did not need it after all but maybe in the future!
Related
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've looked around and all the things i've seen make it so this code should work, but for whatever reason it won't.
<img src="C:\Users\(your user)\Desktop\OhDangPics\ohDangbanner.jpg"/>
I've made a folder in netbeans with the pictures as well, but that won't work either. That's the directory for the file, but it still doesn't work
try this code instead and replace the parenthesis with your user
<!DOCTYPE html>
<html>
<body>
<img src="C:\Users\(your user)\Desktop\OhDangPics\ohDangbanner.jpg" alt="" style="width:1000px;height:1000px;">
</body>
</html>
hope this helps
It's considered best practice to keep anything to do with your project inside the same root directory. I would suggest copying your desktop image and placing it in a new directory inside your project.
Say you had a directory called Project which contained your html file, and this directory contained another called images, and you put your ohDangbanner.jpg image in there, you could then do:
<img src="images/ohDangbanner.jpg" alt=""/>
I have a page and within the page I have an Iframe. The directory is as follows:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
In the iframePage it is referencing the IframeCSS.Css by use of relative link so /IframeCss/IframeCSS.Css
Due to the nature of the application, I am unable to change the link of the iframe page via hard code (Modifying the physical iFrame Html Page)
The overall goal is to get iframePage1.html to see IframeCSS.Css (and all other hrefs/src's) through relative links (href="/IframeCSS/IframeCss.Css")
There are a couple of things I've tried:
Dynamically add a base path to the Iframe
This failed because the base can only be added AFTER the iframe loads thus making the links act as if base did not exists
Create a container Iframe to get the HTML, add the Base, and copy over the Contents over to the displayed Iframe
This failed because of the reason above, this method also causes issues with Google Map API's being loaded in as well
Go through the container iframe, using jquery, append the parent root to all src's and hrefs's to change the url
This also failed.
What would you guys suggest I do at this point?
(The iframe points to the same domain AND the user needs to be able to navigate through the iframe)
parent HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="cmsCSS/CmsStyle.css" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="CmsScript.js"></script>
<script src="Insights.js"></script>
</head>
<body id="Dash">
<form id="form1" runat="server">
<div id="topDash">
<img id="something" src="img/logo.png" />
</div>
</form>
<iframe id="dashBody"></iframe>
<iframe id="iframeContainer"></iframe>
</body>
</html>
using your same directory structure, this -
href="IframeCSS/IframeCss.css"
didn't work? Without the "/" keeps it in the same directory. Conversely, using "../" means back one directory. So if you're trying to move backwards, you can just keep adding "../" (ex: "../../../stuff.css").
referencing a page within the same domain is simply not possible because even without the iframe, the page would not work with the relative file path:
Folder1
Folder2
IframeCSS
IframeCSS.Css
iframePage1.html
stuff.css
parentPage1.html
If you accessed the page by typing in domain.com/Folder1/Folder2/IframePage1.html
the page will not work because IframePage1.html is trying to access the css with:
href="/IframeCSS/IframeCss.Css"
which means that it is looking for domain.com/IframeCSS/IframeCss.Css and based on the file structure I provided, It simply does not exist.
What I was attempting to do was to simply somehow change the Hrefs and src's of the entire iframePage to instead of looking for domain.com/IframeCSS/IframeCss.Css, it would correct the link and search it in domain.com/Folder1/Folder2/IframePage1.html instead.
The solution to this is to put the contents of Folder2 in the root directory, and create a new directory within the new root that contains the parentPage1.html. This way, file paths need not to be changed.
if you have access to the page that is being rendered inside of the iFrame, then all you have to do is add your link inside the <head> tags on that page for the CSS. you should not have to do anything through the calling page.
you can view the page that is being called all by itself. so do everything for it all by itself. JavaScript and all.
create that page first. then call it into the other page. iframePage1.html should be finished before you think about calling it into an iFrame in another page. you should not have to do anything to it through parentPage1.html.
iframePage1.html should have it's own <html> tags, it should be a self sustaining page that can be viewed in a browser with out an iframe.
I feel like I am going a little overboard. but I want to make sure that it is understood.
I can call google.com in an iframe on my page, and it will look the same as it does if I opened it in a browser all by itself.
Found the Answer you are looking for I think
check out this fiddle, the iframe on the right has clickable links that you can navigate inside of that iframe with.
I set the sandbox to allow only a certain number of things, I didn't know about this prior to this question.
JSFiddle
here is the page that I found that told me a little bit about the sandbox, sounds like something that I will read about later
maybe something you should take a look at.
Sandboxed iframes
I thought that you could move around in the iframes, but I was WRONG , but with Sandboxing you can do this!!!!
I´m using a QTextBrowser to display an external html document (and its image resources) which is placed in the same directory as the application. Everything works fine exept that images are not displayed properly. Instead of the actual picture there is a "missing image" icon.
Using Ubuntu 12.04 I didn´t have this problem but in Windows 7 it does not work as expected (which I described before).
I tried different image formats and Qt versions, without success.
If I type in the absolute file path of the image it is displayed fine. But that´s not what I´d like to do as I can´t share my application then.
This is the part which loads the html file into the textbrowser:
QFile file(QApplication::applicationDirPath().append("/test.html"));
if(!file.open(QIODevice::ReadWrite|QIODevice::Text))
return;
QTextStream in(&file);
ui->textBrowser->setHtml(in.readAll());
file.close();
And this is my html document:
<!doctype html>
<html>
<img src="test.png">
<p>paragraph which contains some text</p>
</html>
Does anybody has an idea why it doesn´t display the image?
Thanks in advance,
Peter
I would say that the image path is simply incorrect because its currently relative but you're having to address the HTML file as absolute.
To test, try using an absolute URL on your image src to see if it works. You could try using one from the internet then try one on your local file system.
If they both work with absolute URLs, then you'll just need to look into getting the correct file path into your HTML document.
I hope this helps you to debug the problem. Sorry I don't have a precise answer, I'm also new to QT.
Check it out:
External
Inline
I have successfully reproduced the issue.. on the external page (test.php linking to test.css) you will see an extremely simple html page. There is one div with one image in it. It has a css style applied to it but the background (which is a couple of dropshadows) is missing.
In the second set of pages (test2.php and test2.css), the ONLY difference is that the style properties have been moved inline, everything else is IDENTICAL, but the styling now works.
How come? I've seen this situation many times before but people always like to claim that "there is obviously some overriding styling somewhere that you just forgot about or aren't noticing" but in this case I have gone out of my way to show that there is no overriding styling.
Yet it's browser independent and consistent so I'm sure there is a simple answer.
Relative paths in external CSS files need to be relative to the CSS file, not the page.
Since you've put the url of the image inside a css, inside css folder, the url of the background image have to start with ../
In your inline, you use the full path starting with http://
In your external, you use a relative path starting with support/imag...
The reason the external doesn't work is because the path to the image is incorrect. Either use the full path (not recommended if it's on the same site as the page), or correct the relative path to make it relative to the CSS document, not to the actual page.
For example if your CSS is in a "css" folder like yours is, you usually need to start it's relative path with '../' to jump up one level before accessing your 'images' folder (or whatever the folder is).
You can
a) Put your test.css file in the same directory as your new.html file and replace <link rel="stylesheet" href="support/css/test.css"> with <link rel="stylesheet" href="test.css"> in your html file. Will work.
OR
b) Change the background image url from support/images/content_bgshadow.png to ../../support/images/content_bgshadow.png in your test.css
your just forget to change the path of your background image, it's now relative to your css not your html page
http://blueclick.ca/domains/blueclick.ca/new/support/css/support/images/content_bgshadow.png image doesn't exists you should put ../images/content_bgshadow.png in your stylesheet
You've got wrong url in your css file. Because it's in support/css folder you must set path relatively to this folder, so it should be ../images/content_bgshadow.png.