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">
Related
code:
Why am I not able to see any image here to open amazon?
NOTE: image is saved as th.jfif on my desktop and not in any folder
was expecting to see the image
The issue you are having is very likely due to your image not being in the correct location from where your img is expecting it to be.
I would say take the image from your desktop and place it in a folder, maybe called site. Then put your HTML file and image file in the same site folder and load your page again. Then your path mapping should be accurate and your image will render.
I say it is your path mapping because rendering your HTML link using an online image works just fine.
<img src="https://turnerduckworth.com/sites/default/files/styles/case_study_single_image_s_2x/public/2019-03/5_Amazon_Lettermark_2560.jpg?h=a92f03cd&itok=2nBmNv14" alt="website" width="100">
Surely this is to do with having no file or folder structure. Your image and web page must be detailed relatively to each other.
<img src=" path to the image from the web page location ">
If your web page has a folder with it called images and inside it are all your.... images.
The path will be
src="images/picture-title.jpg"
Read about file structure. To begin with, put your web page inside a folder of it's own and also in that folder create an images folder.
I suspect the path does not match the location of the image you saved. the whole tutorial is on here .
for the example, you saved your image in path images , so you should should type it like this:
<img src="/images/th.jfif.jpeg">
and don't forget to write down the image file extension clearly. hope its help
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
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!
I am designing a web page in html language. At some point I have to insert a .jpg image that I downloaded from the net.
I saved the image on my desktop. Then, I insert it into the web page this way:
<img src = "image.jpg">
The image doesn't appear. But a default icon appears in its place.
Try putting the image within the same folder as your HTML file.
If you're going to be using images on your site - the images must be somewhere within the directory of your current HTML file.
For example,
Root Directory|
index.html Images |
image.jpg
Then within your index.html file, you would have:
<img src="images/image.jpg">
Hope this helps! :)
<body>
<img src='image.jpg'>
</body>
If you want this could work, you must put image.jpg and your html into the same directory.
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!!!!