Sometimes images are not loading properly in my website. Not completely. Lets say page includes 15 images. Two or three images not loading properly. Showing like this. When I refresh page, all images loading fine.
(Browser cache disabled)
The strange thing is this. If I inspect not loaded images using dev tools, get image url and paste it into new tab. Image is there!
I just want an idea why this is happening. Is this common issue? or bad host? long css file? or other issue?
This website contains more than 13,000 images stored in db.
Related
As of October 1, images that are hosted on our server, will NOT display in Chrome for any users when the image is trying to display in html. It works fine in all other browsers. If I paste the exact URL of the image file in the browser, the image works.
example:
This image displays fine here if I paste into my browser:
http://example.com/email/2020/09/file.jpg
But, when the image is included in an html page, the image does not display. i.e. in a webpage, the images show up as missing.
I've discovered that images from other servers work just fine. Why would one server work and another not. I'm trying to get an answer to our I.T. department to let them know if they need to update something on our servers to fix this issue, or if this is a Chrome issue that Google needs to fix?
Any ideas?
Thanks for your help.
I am getting the strange behavior of image to be broken and coming in green color. This issue is very rare but exist. I have verified the below information but i din't get any solution or reason of problem,
Open the image in new link, which opens successfully.
Clear cache and hit the URL again, Opens site successfully.
Refresh the screen by just hitting f5, keeps the issue on screen.
While login-in css is displaying with HTML and broken images.
All css are downloading with status 200 and coming from cache.
All images are coming from azure cdn.
Network trace
Broken Image
try opening the image url location directly and see if the image is corrupted. Maybe also try to re-upload the image see if that fixes it?
I am publishing some simple webpages (HTML, CSS, some JS) from my GitHub repository. When I display index.html in Chrome (55.0.2883.95, 64 bit) by clicking on the URL linked in this repository, the webpage is displayed, but as soon as I scroll down, the featured image disappears when it shouldn't.
The other working link is "Fees" at the top. Click on that, scroll up and down the page, and the featured image will similarly disappear.
I want to point out that I first published this repository/page in Nov. 2016 and the images all displayed fine. Recently I changed the domain name associated with the repo but normally wouldn't expect this to create issues. Also, when I simply zip and download the repo and open in Chrome locally, everything displays perfectly.
Lastly, this site works with CSS Grid so I have the appropriate flag enabled in Chrome. It's hard for me to understand why images suddenly don't display correctly using GitHub Pages!
EDIT Sorry if this question seems vague. Let me restate. Everything seems to initially load and display correctly in my browser. The issue seems to be triggered by merely scrolling down the page.
This code used to display correctly on GitHub Pages. I come back two months later and the same code doesn't work anymore. Image pathnames are all correct. It's evidently not a JS issue. Download the same code and it displays perfectly on localhost.
After reading this thread I realized that one of my extensions was causing the page to disappear on scrolling. Specifically, I disabled the Window Resizer extension and the problem was solved.
I have a small five page website and have the images used across the website in the same folder, img. The website works fine offline and I upload everything with the same structure, however when I view the website on the server, certain images don't display for some reason.
For example, my logo and image slider photo's appear, but then images in the gallery are broken. They're all linked correctly, eg:
<img src="img/logo.png">
They're all name appropriately too, such as slider_1.png etc.
I'm not sure why some display fine whilst others don't, despite them all being in the same folder and being linked the same way in HTML.
Ok, the images are now working but for some reason the CSS isn't working correctly on my own server space, but works on my schools. I haven't played with any of the server settings etc.
Had the same problem and after reading half of Google saw that the new version of FileZilla changed the image extensions from .jpg to .JPG when uploaded to the we- problem solved.
You can change the code like this:
<img src="yourdomain.com/img/logo.png"=
My webpage gets stuck in loading in Chrome (the little spinning icon on the page tab, and the mouse cursor also stuck in loading version), but the odd thing is everything in the website displays fine. This doesn't happen in Firefox or IE.
Does anyone have any theory to what's causing it? Is it because some asset doesn't exist? For example:
<img src="pic.png">
But "pic.png" doesn't exist?
If that's the case how do I check the code to make sure all assets, including css/js/img/sound/video files all exist as linked from the document? My html file is huge, going line by line and checking would take forever.