Note:All my files are in the same directory.
I wrote a simple HTML to display the image.
<html>
<body>
<div style="margin:0 auto; width:100%; text-align:center;">
<p style="font-size:xx-large; font-weight:900;">My homework test</p>
<!--Load a image-->
<img src="mini.jpg" />
</div>
</body>
</html>
When i open this html directly, it can display the image correctly.
But when I try to use my node.js server to open the html, it cannot show the image.
Related
I have this code:
<!DOCTYPE html>
<html>
<head>
<h1 title="First Heading">Heading 1</h1>
<h6 title="Second Heading">Heading 2</h6>
</head>
<body>
<p title="First Paragraph">Paragraph 1</p>
<p title="Second Paragraph">Paragraph 2</p>
<a href="https://www.w3schools.com/html/html_basic.asp" >W3schools</a>
<img src="C:\Users\yorda\OneDrive\Gambar\Aseprite\.jpeg\Canyon.jpeg" alt="Pixel Art" width="320" height="180"
</body>
</html>
If I open my html file via file explorer (double clicking it and go to chrome) it will show the image.
but if I want to preview my html file via VS Code extension the image wont show up.
why is this happen? any way to solve this?
Thanks in advance.
You have to put the image in the same location of your index.html file.
then modify your img src to
<img src="Canyon.jpeg" />
I just launched a very simple site with 5 images. 4 of the images do not show up regardless of the path in the img tag. The 5th image always shows up regardless of the path in the img tag.
I have tried "images/imagename.jpg", "/images.imagename.jpg", "../images.imagename.jpg".
I have tried putting images in root and using src="imagename.jpg".
The images that don't show up have this warning in the console:
Here is the current code:
http://avalynncirce.com/perduco
<!DOCTYPE html>
<html>
<head>
<style>
img {max-height: 100vh;}
</style>
</head>
<body>
<div style="width:20%; float:left; position: fixed;">
<nav>
<ul>
<li>Workflow v1 Scatterplot</li>
<li>Workflow v1 Menu</li>
<li>Workflow v2 Scatterplot</li>
<li>Collaboration Tool: Sketch (MAC and Online)</li>
<li>Collaboration Tool Tool: Figma (Windows)</li>
</ul>
</nav>
</div>
<div style="width:75%; float:right;">
<section id="sv1">
<hr style="margin: 50px;">
<img src="/images/scatterplotv1.png">
</section>
<section id="mv1">
<hr style="margin: 50px;">
<img src="../images/menuv1.png">
</section>
<section id="sv2">
<hr style="margin: 50px;">
<img src="../images/perduco.png">
</section>
<section id="mt">
<hr style="margin: 50px;">
<img src="../images/perduco-sketch.png">
</section>
<section id="mt2">
<hr style="margin: 50px;">
<img src="../images/figma.png">
</section>
</div>
</body>
</html>
Keep Your Folder look like this. and try below HTML for Image.
<img src="images/logo.png" alt="logo"/>
"../images/imagename.jpg" will look for it in your root folder (or one folder up from "/images").
I always use "./images/imagename.jpg" and it always works.
Your browser might be caching images incorrectly. Try opening developer tools (if using chrome) choosing the network tab and disabling cache when dev tools are open.
Otherwise, check your console in dev tools for possible errors as to why they aren't showing.
This has never occurred before and I'm not sure why it occurred this time, but the image files in question were set to private. I use Filezilla for uploading files. A right-click on the server image brought up a menu where I could change the privacy settings.
I have page in which I have set the background as completely transparent using:
body {
background:none transparent!important;
}
This works as intended I am displaying this page in a transparent iframe on a different website and I want to see the website background through the page.
However if I access the page directly the background shows as white (its got to be something right?)
Is this a hardcoded browser thing or is there a way I can set this to black?
Website code:
<div class="page-background ">
<div class="header">
<span>Website menu here</span>
<span>Book</span>
<span>About</span>
<span>Contact Us</span>
</div>
<iframe src="http://localhost:4500" allowtransparency="true"></iframe>
</div>
When you access directly, your body has its parent as html which has background as white. This is the reason you see the white background. If you want to see black, you need to set your html to black background
html {
background: #000;
margin: 0;
height: 100%;
}
body {
background: #fff;
height: 100%;
margin: 0;
}
<button onclick="document.body.style.background = 'transparent';">
Make Transparent
</button>
Just create these three files and provide the image link in background-image attribute then second file name should be test2.html and third file name shoud be test3.html. Then run the first file and click on book option.
<html>
<body style="background-image:url('wallpaper2you_462082.jpg');background-size:cover">
<div class="page-background ">
<div class="header">
<span>Website menu here</span>
<span>Book</span>
<span>About</span>
<span>Contact Us</span>
</div>
<iframe src="test3.html" allowtransparency="true" name="iframe"></iframe>
</div>
</body>
</html>
<html>
<body style='color:white'>
<p>Hi</p>
<p>How are you?</p>
</body>
</html>
<html>
<body style='color:red'>
<p>Hi</p>
<p>How are you?</p>
<p>Tell me about yourself.</p>
</body>
</html>
I need to create a little html code that I will use in sharepoint in script editor. The idea is that I have some report from Microsoft BI in iframe (changed the address in code below) and it works fine. But I want to cover the "share buttons" in the bottom right of the site, so it can't be shared. The iframe should fill the whole WebPart in sharepoint, so I tried to allign the image simply to bottom right corner, but it doesn't seem to work. Any ideas?
<html>
<head>
</head>
<body>
<iframe src="https://www.google.pl/?gfe_rd=cr&ei=x5UEWO-yGaOh8welvY2IAQ" width="100%" height="700">
</iframe>
<img src="logo.jpg" align="bottom" align="right">
</body>
</html>
Ok, I've finally got it working. The "TOP" variable is static, it's the height of the displayed website minus the height of the image itself. Here is the code:
<html>
<head>
</head>
<body>
<div style="height:750px; position:relative">
<iframe style="border:none; width:100%; height:700px; z-index:1" src="website.com"></iframe>
<img style="top:663px; right:0px; position:absolute; z-index:9" src="testbar2.jpg">
</div>
</body>
</html>
The align attribute of <img> is not supported in HTML5. Use CSS instead.
img {
float: right;
}
I have tried many things but cannot get these two documents to work together. I am sure the CSS file is linked correctly with the correct file name. I'm attempting this after watching this YouTube video tutorial below on coding a blog. https://www.youtube.com/watch?v=24QmGjcqIiw
Here is the HTML:
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="new 1.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
<div class="post">
<h1>Post Title</h1>
<p>Testing Testing 123...</p>
</div>
</div>
</div>
</body>
</html>
Now here's the CSS:
*{
margin:0px;
padding:0px;
}
body{
background-color: #f0f0f0;
font-size:14px;
color:#000000;
}
wrapper{
width: 80px;
margin-left:auto;
margin-right:auto;
}
#header
{
background-color:#cZazqqcccccaccccc;
height:800px;
width: 100%;
margin-bottom:10px;
}
#.post
{
background-color:#ffffff;
padding: 5px;
border: 1px solid #cccccc;
margin-bottom:5px;
}
I'd try the 2 most common culprits:
Incorrect filename
Incorrect file location
If your filename is definitely correct, go straight to 2. It is considered best practice to avoid spaces, even though browsers should be able to read them as #zzzzBov points out.
There's 3 main ways you can reference your files:
a direct link to the file, without specifying a path
a relative link, which points to your file relative to where the file requesting it is located
an absolute link, which specifies a complete file path from a domain or a hard drive
And if you file structure (how you've organised all your stuff) looks like this:
public_html
L css
L myStyles.css
L index.html
L aboutMySite.html
Your links inside index.html and aboutMySite.html would look like this:
direct link: /css/myStyles.css (the first / represents the root directory, or the highest level folder in which your site lives)
relative link: ../css/myStyles.css
absolute link: www.mysite.com/css/myStyles.css
Avoid using space characters in your filenames.
Rename new 1.css to new1.css (make sure both the reference and the actual filename match) and make sure all CSS files are in the same folder as your HTML file since you are not specifying any path.
If you really wish to use the space character (an invalid character for URIs), encode them with %20, but it's a lot simpler to avoid them.