In my Java web application, the images sometimes fail to appear, instead showing the "broken link" red X symbol. Looking at the Network tab in Chrome's developer tools, I can see that the images are being loaded with a status code of 200 (OK) and the correct content type header. There does not appear to be a content length header, if that matters.
I have not been able to reproduce the issue when I run the application locally from my IDE; it only seems to happen when I run it on the server. My first thought was that it might have something to do with IE's Compatibility View, but the same thing happens whether Compatibility View is on or off, and it also happens in Chrome. I also tried changing some of IE's security settings, since the app is in the Local Intranet Zone when I run it locally, while it is in Trusted Sites when it I run it on the server. That didn't help.
I don't think there is anything unusual about the img tags in the JSP. I am using an older DOCTYPE because it prevents IE 8 from putting a border around the page, and I need to support IE 8. The border is undesirable, but if changing the DOCTYPE would fix the problem, it would be worth it. I realize that the older DOCTYPE puts IE into quirks mode, but changing it to <!DOCTYPE html> didn't seem to help.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head> ... </head>
<body>
<div>
<img class="loginButton" width="100" height="28" alt="Log In" title="Log In" src="images/login.png"/>
</div>
...
</body>
</html>
If I reload the page, some of the images will reappear, while others will disappear. I typically have to reload the page 4 or 5 times before all the images will appear. Clearing cache and/or cookies didn't seem to help.
There are not a lot of images, typically only 6 or 7 on a page, and they are no bigger than 4kb in size. Some images are GIFs while others are PNGs; both types have the same problem. I am running Tomcat 7 on Java 1.6 both locally and on the server.
Another piece of information, although I'm not sure how it fits into the puzzle: I looked in the folder where IE stores its cached files, and I noticed that the file for one of the images that was not being displayed had a file size of 0. I deleted the file, reloaded the page, and the image appeared. Then I reloaded the page a couple of times until the image disappeared, and looked in the cache directory. Once again, the image file had a size of zero. I'm not sure why that would happen.
I have looked around and seen similar questions, but so far no solution. I've tried to supply all the information that I thought would be relevant, but let me know if there is anything else that might be important. Thanks for your help.
Related
I made some simple HTML files and tried to open them on my iPhone, in both the files app and some third party HTML viewer apps from the App Store, but the images are not being displayed, not a single one.
It‘s not because the image is in another folder or the file path is incorrect, I‘ve checked all that. Also I‘ve looked up the issue and it seems that this might be caused by too large png files, but I tried to resize the images and also changing them to jpg, but still didn‘t work. So what could be the issue here?
I‘ve attached an image of the result that I get with this example code (the png file is in the same folder as the HTML file):
<html>
<head>
</head>
<body>
Test
<br>
<br>
<img src="image.png">
</body>
</html>
Result
This is almost certainly a security related issue.
I ran into this helping a friend who was working on an email newsletter and sent it to herself as an attachment. Opening in gmail showed the same behavior - no images.
So I tried saving the file to the Files app and opening it. Same thing. Loading the page from a web server it worked n
It doesn’t entirely make sense why they need to be so strict - the same thing in a desktop browser would show images. But I don’t think there’s anything you can do in this case.
Saving as a complete web page archive may work if the goal is to email an attachment that someone needs to open - but that’s not a common thing to do and if you send the message as a real email it’ll work fine.
Edited to clarify the underlying question.
I am trying to debug a simple HTML5 webpage containing one image and one video. Everything displays fine. The video plays correctly. But, when I try to refresh the page, everything is downloaded except the video file. I am using the Firefox developer tools but I can't understand what is going on.
On the network tab I see the .html file being downloaded, then the image.jpg file. But I never see the video.mp4 file downloaded. The video plays OK, but it is not the current version on the server. It seems to be a previous version that has been cached.
I'm mystified why this should be. The cache is disabled in developer tools. I'm refreshing the page with Ctrl+F5. It's as if the video is being served from some secret local cache that I don't know about. I'm using Firefox 47.0.1. The same thing also happens when I test with Firebug.
Edit. I have now tried Developer Tools in Chrome and it's exactly the same. The very first time I access the page, I can see video.mp4 being downloaded. On subsequent reloads, I see the .html and .jpg files normally, but not the video.mp4 file. It must be cached somewhere because it plays. I disabled the cache in Chrome Dev Tools. I cleared the cache explicitly and tried an incognito window. Apart from the very first time, I never see any indication of the video file being downloaded.
I must be missing something obvious. Can anyone else reproduce this?
Here is my HTML.
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Test page.</p>
<img src="media/image.jpg">
<video src="media/video.mp4" controls="">
Display this if the browser can't play video.
</video>
</body>
Information moved from comments on an answer to the question:
1:
Thanks #nakji. Clearing the cache and private browsing made no difference at all. But closing the browser did. I reopened the browser after clearing the cache. On my very first access to the page I could see two GETs for video.mp4 with responses 206 (Partial Content). But after that it was back to the original problem. I will download Chrome and try that
2:
#ManoDestro. I tried everything possible to force a fresh download of video.mp4. But it's not happening. I reloaded the page with Ctrl+F5. I turned off caching in Dev Tools settings. I cleared the cache manually. I tried a private browsing window. I can't think of anything else. It's like the video is served from a secret cache that doesn't obey the normal caching rules. I have used multiple tools to confirm that the file is not coming down the wire - FF Dev Tools, Firebug, and now Wireshark. Can someone please test with a similar setup?
After a whole day's Googling I can now answer my own question. It turns out that Firefox has a special "media cache" for HTML5 video and audio content which is completely separate from the regular cache that everyone knows about. It is optimised for the high bandwidth and huge files associated with media content. One of the devs, Robert O'Callahan explains it all here.
The dumb thing is that this media cache doesn't seem to get cleared when you would expect it to. In fact it never seems to get cleared. Ever. The result is that Firefox keeps serving up stale content from the cache when you really want it to fetch the media file again from the server. This was the problem I was trying to debug originally. Firefox kept playing the wrong video after I changed the file on the server. I couldn't get it to download the new version.
All the things you normally do to force a page reload don't work with the media cache. The following have no effect.
The user selects 'Clear recent history' and deletes everything.
The user turns off caching in Developer tools.
The user forces a complete page reload with Ctrl+F5.
The only thing that does work is closing the browser and starting again. I'm still finding my way around this complex area. If anyone knows any more about it, please comment.
I reported this as a bug to Firefox here.
I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching
I have an app that displays the same image in multiple locations and may change the src of an image.
When I point to a PNG image that I've already used before, the browser does not bother making a new request, it simply uses the PNG image that's already in the cache. However, when I point to an SVG image image that I've used before, the browser (Chrome 22) makes a new request. The server returns 304 (Not Modified), so no new image needs to be downloaded, but this still takes some extra processing.
This can be easily tested in this jsFiddle: http://jsfiddle.net/jtmuw/1/
$('button').click( function() {
$('#a').attr('src', "myImage.svg");
$('#b').attr('src', "myImage.png");
});
If you open the fiddle with Chrome (or at least Chrome v.22.0.1229.94) and you open up your network tab you will see the two images have been requested. If you then hit "reload images" several times, your network tab will show multiple requests for the SVG image but no further requests for the PNG image.
As far as I can tell, the same headers are being returned by the server, so I can't see any reason for the difference.
I am not seeing this on FF or Safari, so this may be a Chrome issue. However, I still feel like maybe there is some underlying differences in the headers that I'm missing, and it's not just that Chrome is treating SVG images weirdly.
You can perhaps force Chrome to cache the file. w3schools has a pretty good overview of this as follows: http://www.w3schools.com/html/html5_app_cache.asp
Essentially you'll want to create a manifest file (call it... "myCache.appcache" or whatever else)
CACHE MANIFEST
/path/to/svg/file.svg
and then point to this in your html file as so:
<html manifest="myCache.appcache">
This will tell Chrome that, even when you don't have internet access, this file should be cached and accessible anyway.
Include the SVG image at the top of the document.
<html>
<head>
...
</head>
<body>
<img style="display:none" src="cached.svg">
....
</body>
<html>
It's been a while since I did serious web development. Now I meet a host of brand new problems I'm no longer familiar with..
I have some .png images for various icons in my web page. What I find is that whenever I edit these images, they stop working inside a page in IE8. That is, they (usually) display OK when I first open the page, then are replaced by the placeholder icon on refresh. Sometimes, some of the icons display and others, with the same src, don't.
My image tags are nothing fancy, typically:
<img src="images/misc/smallreport.png" alt="Report" />
When I right-click an icon in the page and select "properties", protocol, type, address and size are shown as "Not Available", and dimensions are incorrect (size of the placeholder, I bet).
If I open the images directly in IE (ie. not within the page), they work just fine.
I have used Paint.NET to edit the images, but have also tried saving them with Paint.
Right now, I am working right off the hard disk (ie. not through a web server). And, oh yes, none of this happens in Google Chrome.
What's going on here?
check the path to the file is correct - can we see the tag please.
Well, we learn something new every day..
I mentioned that I'm running this directly off the harddisk? Now, it turns out the html page (which I had gotten off a coworker) was blocked "to help protect my computer", as Windows does.
This is no big surprise, lots of files I'm working with originate on other computers, and I usually don't worry much about it (except with executables, which won't run until unblocked).
It seems, however, that when IE8 loads such a blocked HTML file, its security settings adjust somehow, and - well, I can only guess at the details, but as soon as I right-clicked the HTML file, selected Properties and clicked the "unblock" button, the problem went away.
Something similar happened to me once, I tried hard to find what was wrong, then I realized I was saving (from Photoshop) the file as PSD but with extension .png. Make sure you're not doing the same.
Also:
Clear temporary Internet files
Verify that the Show Pictures option has not been turned off
Make sure that the Toggle Images.exe Web accessory is not present and disabling images
Make sure that a third-party Internet security, firewall, or cookie-blocking program is not causing the problem
Enable the Auto-Select encoding option
Source
It might be that the website you have browse has a lack of support
for an IE browser. IE is a nightmare for all web developers & Web designers.
It might be the developer of that website didn't care for an IE display because
of IE issues. Perhaps IE is trying to create a web standard to increase their
sales and marketing strategy. That's why don't care the modern Web development standard.
Why Chrome or Firefox or Safari, it's a free anyway.