I have a basic webpage that references four image files using the following code:
<img src="/images/SanFran.jpg" name="urbanForm" alt="urbanFormA" width="150" height="100"/>
(I change SanFran.jpg, to London.jpg, NewYork.jpg and Barcelona.jpg - just replacing the filename)
However, although the 4 jpegs are very similar (200 x 150 pixels) and made using a similar technique (cropping an image in Picassa), only one of the files will load (London.jpg). The other three give me a broken link message. I have checked that I am do not have misspellings numerous times, and cannot find the problem.
Is there anything that I have not considered?
(I'm using Aptana Studio on OSX and viewing it using Safari as a previewer; the same problem exists if I look at it using Firefox or Chrome)
Are all the images in the same directory?
Make all the file names lowercase, so you know that isn't the issue.
double check extensions, "jpg or jpeg or JPG or JPEG"
take it back to basics <img src="images/filename.jpg" />
Try naming one of the others
SanFran.jpg. See what happens.
Might give you a clue.
Open them all in windows explorer,
confirm the images themselves load
normally and aren't corrupt.
Check all are in /images/
right click on the broken link and
choose view image or copy image
location. See if where it's trying
to access is definitely the right
place.
Do the same with the working one.
Compare and see if any differences.
change everything to lowercase, just
in case (excuse pun)
hit ctrl+shift+reload a few times,
and F5 a few times.
clear cache manually if you know how
or have the tools.
Copy it to a different loacation and
try loading them there. Ideally a
different computer.
Upload it somewhere and see if it
works in your browser when online
Hopefully one of those may help...
If you know the files are there, make sure the case of the filename matches (s is different than S on Linux), and then make sure .jpg is the proper extension and not .jpeg.
It could be because your Jpegs are saved as CMYK as oppose to RGB. See this link for more detail. However this would only affect some browsers
http://www.plaveb.com/blog/cmyk-images-not-displayed-in-internet-explorer
Open the images in Photoshop and resave in RGB color format (just incase it's CMYK). Known issue in some legacy browsers, not sure when or if it went away.
Related
just starting HTML and I'm at the point of learning . I know that if I put the "index.html" and the img in the same directory, It should be fine to just address the img by name as in ". But when I open the page, all I see is a cracked image. When I look the preview of the page in my file explorer, it just says that "some images where blocked to avoid the sender identifies your computer. Open this item to exibit the images". WHen I try to just source with an URL, it shows up fine, no problems at all, I've tried using alt and not, other browsers as well.
I tried renaming the img file to something simpler to simplify not mistaking the name, tried putting the img and the project (index) file in another directory together, and I was hoping to understand why this which sounds so simple is getting me so many errors.
After searching a bit I came across this hope it helps :)
"Well I think I've fixed it. In control panel>windows defender>options>real-time protection then uncheck scan downloaded files and attachments. After I did this, I could see images on my system use while creating an html page."
link to refer:https://answers.microsoft.com/en-us/windows/forum/all/some-pictures-have-been-blocked-to-helpactually/2aa402d3-0404-44d9-83ce-960258979c07
I had given up on protecting online images since even disabling the easiest ways to get at images still left people the option to use Inspect, then Sources, and poke around in the folders until they found the right file, hey, presto.
The only real way to get around that was to break the image up into tons of fragments so you're just depending on people not being able to code and getting bored with the idea of putting the image back together.
This site, however, has a public domain image that has somehow truly blocked the Inspect hack: The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image. How'd they pull that off? and why isn't it more common? How expensive/time consuming would it be to implement for online image databases?
The image appears within Inspect (d7... folder, 3rd image) but any attempt to open or download that image just produces useless "download" files instead of the actual image.
I managed to download it (using qutebrowser) by opening in new tab. The filename was qwe_download.
When i opened the image in my file manager (Thunar), it showed as WebP image.
I used feh (image viewer) and it was exactly the image.
Maybe use WebP compatible image viewer to open the file.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have a really simple piece of CSS which is applying a background image to <li> elements
.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }
This works fine when I view it locally, without a web server, i.e. by double-clicking the .html file.
But as soon as I serve the same page via Apache - whether on localhost or a production server - the background images disappear.
Other background images on the page work fine - and all have identical (relative) paths.
Specifying an absolute path to the background-images does not work either.
Renaming the files did not work.
The images can be displayed just fine if navigated to directly in the browser.
Monitoring Apache's access log, the browser doesn't even attempt to request the images (!), even if an absolute URL is supplied in the CSS.
When I inspect the <li> Firebug says "could not load the given URL" but when I copy and paste the background-image URL straight from the CSS in Firebug into a new tab - guess what? It works.
I have a <div> on the same page with a different background image from the same folder which works just fine. When I replace its filename with one of my "problem" files I notice it isn't displayed any more.
The images in question are 20x20px PNGs (but I tried JPGs too).
All other browsers work fine.
This is truly driving me crazy.
Unbelievable. Truly unbelievable.
The culprit was Adblock Plus, which I had installed on Firefox but not any other browser. It was interpreting the names and/or class names of the background images as being either advertisements or social media annoyances, and therefore silently blocking them.
I had previously added my production domain to its white list, but when it changed I forgot to update it.
That explains why some image filenames worked (e.g. icon_f.png whereas others - icon_fb.png or icon_facebook.png - did not).
Let this be a lesson - do not run any kind of addons on your development browser.
I was ready to cry... and think I will now. Cry for my stupidity.
Thank you to all for your input.
Specifically, the culprit is Fanboy's Social Blocking List, which is one of the filter subscriptions included in Adblock Plus. It has already caused me a lot of distress in the past.
To disable it, click on the Adblock Plus toolbar button and choose Open filter preferences. You'll then find the list of subscriptions and you can simply unsubscribe to that one.
It's better than disabling Adblock Plus completely so you can continue using it for what it was originally intended: blocking ads.
I've read the SO posts regarding this and can not find a solution.
I've tried changing the link in the HTML to another location. I've tried clearing all the browser data. But, it still pulls a previous favicon.ico.
Does anyone know where it is getting this old favicon.ico? I should be able to delete it manually at a minimum.
This site process does not work.
http://www.phpjunkyard.com/tutorials/force-favicon-refresh.php
Actually answer might be here:
How to clear IE's favicon cache?
This is wrong too...clearing the browsing history and cache..does nothing to the favicon.ico file
O.K...there was a check box you have to de-select to keep it from saving favorites...this was not intuitive b.c. you have to select all the rest.
From there I changed the file name and link to in the HTML.
Then I waited about a day
Then it changed....I.E has some sort of timer..can anyone quantify this delay for it to pick up changes?
I've recently noticed that Windows 7 does not update images, that is if I save and image over and exiting image...windows will still display the old image until I click on it. Probably related in some way to Microsoft's philosophy on updating images