something confusing.. I have a img-tag
<img src="http://example.com/images/1452630193_9305-normal.jpg" class="fqfqpowzxfpdkrchufzi">
But the image is not visible in the browser (FF 48.0.2).. the inspector says "could not load file".. but when I copy the path and paste it in the url of the browser, the image is definetly there.
also on my older version of FF, the image shows up correctly.
did I miss something important? why is the image not showing up?
Since all of the images are located in the "ad_min" directory, I think you have an adblocker that has picked up the "ad" in the URL and blocked the image from loading.
My chrome dev tools has said that the image has been blocked from loading by the client, which is why I am suspicious.
I disabled my adblock, and surely enough, the images did load like they were meant to
Related
I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.
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?
So I've uploaded my html, css and js files via Pydio. But the site seems to get messed up. Can anyone tell me what happened to it and how to fix it?
Some of the google font I used shows up but some didn't. Also, the bootstrap grid doesn't show up like its supposed to be. The site also didn't scale according to screen size.
When I preview the website in Brackets, it looks perfectly fine.
Please help.
mean-design.com
I think that you forgot to upload some files.
Here is the list :
( click on the image to zoom in )
Sounds to me that you did not upload everything or there are some absolute paths in your code. If you copy everything you uploaded to another local machine, does it work then?
You can actually see which files are missing if you open the online version of your page in your webbrowser and have a look at the developer console (press F12 in Chrome, Ctrl+Shift+I in Firefox). In the console all missing files are stated in the logged errors.
Thanks to Relisora we even have a screenshot of the error console:
Check if you uploaded all files and if so, check their path and link tags.
I have no idea why a simple gif image is not being loaded properly. In the html code I have the usual
<img src="/img/loading.gif" alt="Loading" title="Loading" />
and the file is in that folder. The weird thing is that if I place there /img/logo.png the image is loaded properly.
The filename is correct, I've even copied and pasted it renaming the original files.
PS tested on Firefox 12, Safari 6.0.2 Chrome 23.0.1271.95 (all for Mac)
It was probably a corrupt gif. Your code should work with some other gif. If you really want to get the corrupt gif to work, try opening it in an image editor program and then resave it as gif (or any other format).
Silly question, but what does your gif look like? Is it transparent, or white against a white background?
One possible way to diagnose the problem would be (in Chrome or Firefox), to press F12 to bring up the developer tools and look at your img element to see if the image has loaded in the DOM.
I think the problem was with the gif file, probably somehow broken. I got it from a random resources web site and downloaded from it.
I've tried with a new file got from http://www.ajaxload.info/ now with the code unchanged it works fine.
Edit: the "broken" gif file was working fine elsewhere in the system (e.g. quicklook).
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>