Images does not display in firefox and in chrome. Safari works fine. I code the image as a background image in CSS and coded the image in HTML. When I preview the page, the image can only be seen in safari. Why? This occurred when I bought a new computer.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="img/background.png" alt="">
</body>
</html>
I found out why the image was not showing in firefox and chrome. The image itself was getting errors. I found out when I tried importing the image into photoshop, photoshopped has an error message saying "Could not place “background.png” because the file-format module cannot parse the file." So I made a new image in the html, and the image displayed on the browsers.
Related
In a minimal HTML page with <img src="example.png">, I only see the original quality if I zoom to 80% - reproduced in Firefox, Chrome, and Edge. Using srcset="example.png 1.25x" fixes this.
This appears to be due to changing my system display setting (Windows 10):
yet, other sites work fine. I've read that one way's to provide multi-resolution images via srcset, but suppose that's not an option. (I tried providing the same image at 1.25x, which worked for me, but broke it for a user with 100% system zoom.)
How else can I address this? It's just about resizing the image appropriately, but don't know how to do this portably with HTML/CSS.
MRE: Code + image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<img src="example.png">
</body>
</html>
^ this is blurry for me unless I zoom to 1/1.25 = 0.8.
I have a web page, the problem is that IE and MS-Edge doesn't seem to load some images. Hence I tried working on just one image, given below. This also doesn't get displayed. Everything works fine in Firefox, Chrome and Opera. Could you please tell me what the problem is??
the image
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="./images/services/2.jpg" />
</body>
</html>
js fiddle
I suggest you double check the path of the image. Maybe it helps if you drag 'n drop the image directly to IE or Edge and have a look at the address displayed in the browser...
I have this img tag, that should display an image. However, it keeps popping up as an 'x' in Chrome, Firefox, Internet Edge, or Explorer. So what can be the problem? do you have check my internet browser settings if there is a compatibility issue.
I tried other images too and they wouldn't work. I would also like to state that my image folder is inside a folder called 'My Website" and then it has a folder called "HTML" which has my index.html page then I have an image folder inside that folder which contains that image.
Also, I have pressed "F12" and pressed "Ctrl" and "Click" on the image location and the actual image appeared on the screen but not the side. I also get this error in the console:
SCRIPT7002: XMLHttpRequest: Network Error 0x3, The system cannot find the path specified.
I don't know if this would help narrow down the problem.
<!DOCTYPE HTML>
<html>
<head>
<title>My First Website</title>
<meta http-equiv="My website" content="text/html; charset=uft-8"/>
</head>
<body>
<img src="HTML/flightsiminside.jpg" height="267" width="400"/>
<div>
<header>
<h1>My first website</h1>
</header>
</div>
</body>
</html>
I'm having trouble with showing an image on an iPhone. Currently, I have a pretty large image, around 9000x4500. I'm trying to show this image resized in an iPhone. I'm working with the simulator now and it just will not show up. I have some pretty simple code here (using phonegap):
<!DOCTYPE HTML>
<html>
<head>
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova.js"></script>
<style>
img.Image {
width: 100%;
max-width:100%;}
</style>
</head>
<body>
<img src = "FloorPlans/plazaone.png" class = "Image" />
</body>
</html>
And here's a screenshot of what my simulator looks like:
Anyone know how to fix this issue?
Figured out why it wasn't working. It seems that if one tries to put an image on iOS through HTML, there is a certain limit of what resolution it can handle (not for jpgs it seems, but for GIFs and PNGs, might have something to do with transparency). All I had to do was resize my pictures down to 50% of their original size and they worked.
I'm trying to embed a html5 banner created in Adobe Edge, the simplest way I could think of was dumping all the code edge spits out onto the ftp and then using an iframe to point at the html file. If I do this locally on my machine it works fine, if I try it on our live site the top left corner of the website is what appears in the iframe instead of the banner. It's a Joomla 1.5 site I have no idea what would cause this as I've not used iframes before. I've edited the code so it no longer has spaces.
Here is my website: www.webchild.com.au
and here is the iframe code:
<iframe src="/stdAds/html5/bilby-test/bilby_theatrical_banner.html" width="300" height="250" frameborder="0" scrolling="no"></iframe>
The code inside the html file is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Bilby Theatrical Productions Banner</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="bilby_theatrical_banner_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-380725615 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-380725615">
</div>
</body>
</html>
Try removing the spaces out of your link. It may well be the %20's replicating the spacebar are screwing up the link. Else have you checked the html file your including is definately in the correct location on your FTP. If you just try going straight to the link ( http://www.webchild.com.au/stdAds/html5/bilby-test/Bilby%20Theatrical%20Banner.html ) you can see there is a 404 error which is probably why the top of your site is appearing - the 404 error page rather than the page