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.
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" />
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.
I'm a beginner and I'm creating my first website, but I've stumbled with one page that will not recognize the CSS it's linked to.
I've linked each html page of the website to its own CSS style sheet and they all work, except for one. All the files are in the same root folder and if I check the 'Page Source' when opening my problematic page in a browser (FireFox) there are no errors showing up, so I'm really lost.
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>About X</title>
<LINK rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<header>
<img src="images\logo.jpg" width="100" height="80" alt="logo">
<h1>Mister X</h1>
<nav>
<a href=///C:/Users/Soniaa/Desktop/web%20design/webpage.html>Pictures</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/News.html>News</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/About.html>About</a>
Shop
</nav>email#gmail.com</address>
</header>
<figure><img src="images/pic.jpg" width="300" height="300" alt="Portrait">
<figcaption>Short Bio... </figcaption>
</figure>
<h2>Education</h2>
<ul>
<li>this</li>
<li>that</li>
</ul>
<h2>Personal Exhibitions</h2>
<dl>
<dt>2010</dt>
<dd>...</dd>
<dt>2006</dt>
<dd>...<dd>
<dd>...</dd>
<h2>Group Exhibitions</h2>
<dl>
<dt>2008</dt>
<dd>...</dd>
<dd>...</dd>
<footer>© Mister x <br>
<IMG SRC="images/fb.png" width="30" height="30" ALT="Facebook">
<br>
Webdesign by me </footer>
</body>
</html>
The actual page has a lot of definition lists in it (no idea if that would have anything to do with it).
The same CSS works with my "Home" page, for example, which has the same header.
Maybe I'm missing something very obvious, but any help would appreciated!
EDIT: Thank you to everyone who took the time to answer!
Unfortunately I didn't find the problem but I think maybe I didn't give enough details so I'll rephrase and repost the question (I didn't want to delete this because someone else might find a helpful answer for themselves).
Hope that's okay...
Is your CSS in the same directory as your HTML file? If it's not you probably should do something like
<link rel="stylesheet" type="text/css" href="css/about.css">
Also make sure you did not make any typo's. If what you are describing is really true it should work.
Your markup is fine there seems to be no problem with it.The files are working perfectly on my computer.Try erasing the history of your browser and then reload it, or change the browser and see if it works.
Here's my code
<div class="table">
<div class="tr">
<div class="td">
<h1 class="logo-fill">
<a href="#" title="Logo">
<img alt="logo" src="./images/logo.png" />
</a>
</h1>
</div>
<div class="td">
<a href="#" title="AdSpace">
<img alt="adspace" src="./images/adspace.png" />
</a>
</div>
</div>
</div>
For some reason, the second image (adspace.png) is not displaying at all. If I remove the entire img tag and replace it with text, the text is displayed. Alternativly if I change the img tag to:
<iframe src="https://clients.ragezone.com/out.php/display/show_custom?id=48" scrolling="no" style="padding: 0px; overflow: hidden;" width="468px" height="60px" frameborder="no"></iframe>
Apparently that works as well. adspace.png is simply a 468px x 60px green box.
My money would be on the fact that you have an adblocker in your browser. Try changing class names and img name.
Adblocker plugins search for certain keywords in the code and block the page elements based on that.
In your image source path I saw one [dot] miss placed that may be a one problem.
This is your code
<img alt="adspace" src="./images/adspace.png" />
And try with this one
<img alt="adspace" src="../images/adspace.png" />
And other problem is your image name I also faced to this issue your image name is adspace.png and you added alt="adspace" and wrap it with link tag having the title with Adspace so the reason is some of plugins in your browser block all the images and divs starting with "ads / ad" this is called adblock plugins.
So you can easily change your img name and change everything starting with "ad" then you can find some useful fixing. Other way is you can remove the adblock plugins from your browser.
And please check your network too some networks admin can block ads too.
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>