Images not displaying in WebKit based browsers - html

For some strange, bizarre reason, my images in my website just will not display on webkit based languages (such as safari and chrome).
This is the image tag
<img src="images/dukkah.jpg" class="imgleft"/>
Not only does it not display in the website, it wont display when accessed directly at http://kilkin.massiveatom.com/kilkin/images/dukkah.jpg
...Why?

Imagemagick reports that this particular image is saved in CMYK colorspace instead of the more standard RGB. Try converting it, it should be more compatible with the webkit rendering engine.
Imagemagick is available for download from http://www.imagemagick.org/script/index.php - it's available for windows and *NIX systems.

I have come across this problem a couple of times.
I think it is because of some problem in the file format.
Try importing the file in some image editor and saving it again. This should get rid of the problem.

I tried the url you gave in FireFox 3 and IE 6, IE 6 won't show it either, firefox works. My guess is that there is something wrong with the jpg file.

Are you JPEG's compressed in Jpeg 2000 Format? If so, there is a known bug:
https://bugs.webkit.org/show_bug.cgi?id=8754

"The image “http://kilkin.massiveatom.com/kilkin/images/dukkah.jpg” cannot be displayed, because it contains errors." and the image itself has some XML-fragment in it. So as others proposed: try to open with an editor and resave it.

It's as stated elsewere a bug in the image.
Irfanview is a very good viewer that will display any image (and other formats as well), is small and free and will also let you adjust, crop or rescale images very easily without heavy programs like photoshop.
I suggest download irfanview and the image, open the image in irfanview and hit CTRL+S and save it over itself. Then upload the image again. Any problem should be solved.

Your image file does not contain image data, it contains html text:
$ curl -s http://kilkin.massiveatom.com/kilkin/images/dukkah.jpg
<html><head></head><body><!-- vbe --></body></html>

Related

Images being found on website load but not loaded correctly (broken)

Have this weird case when my images are being found in sources, linked correctly, src url is okay, but still not being displayed. Other images in that same folder are being loaded and displayed just fine, but my new uploaded images are not. I'm using open cart and upload images via ftp. Permissions are fine 644 like the others. I asked other developers in my team and no one has any clue why is that. Guys tried downlaoding and opening the image on their computer and can't even open it, whereas I'm using MAC and can open the same images on my computer without any problems. Images are saved as .jpg from Photoshop. What's the deal here? Here is how it looks in Mozilla:
This can happen because of corrupted image file. Most likely it is the extension problem of the file. Instead of doing save as in Photoshop, try exporting the image through export settings and choose png or jpg format there. It should work fine now, it worked for me.
Just to make sure on this front - Are you uploading them as .JPG or .jpg? If so, the problem may lie there...
If you link to a file that is .jpg and you put .JPG into the code for the link, the link will not work.
Make sure you're not using uppercase JPG as some servers will not read/detect them, and you will not able to see the pictures until you change the extension to lower case jpg.
Also, make sure the color mode, if saving them from Photoshop directly to jpg, is RGB format. If you use any other color mode, it may not display at all. CMYK files for example will not display correctly.

PDF Rendering Gibberish in Browser

I built a PDF in Illustrator, and am linking to it from a web page. It looks fine in SumatraPDF and in the Windows preview pane, but the browser renders this (just so you know, this is not how I want it to look)
Is this because I have font embedded? The only thing that I want to have happen with this is for a couple links on it to be clickable; otherwise, I'd convert it all to outlines. Is there something I need to do here that I haven't done?
EDIT: Here's a weird update about this. The browser follows the link embedded in the pdf when I click it. So it has the right data, but the wrong presentation apparently.
I'm assuming you are/were using either the Dev or Canary channel of Chrome. There was an experiment running in both channels that was causing this, which has since been reverted in Canary but is still affecting Dev 59.0.3053.X. For the more technical; this experiment enabled the PDFium code to use Skia to render paths instead of Anti-Grain Geometry and caused this font gibberish.
Here is the link to the bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=705039
UPDATE: This was fixed in the Dev Channel with update 59.0.3071.X

JPG Images not displaying in IE and Firefox

I'm having a weird problem and it's driving me crazy. The problem is that every jpg image is not displayed in IE and Firefox browsers, while displaying properly in Chrome and Opera. What could be the cause of this problem? In IE when trying to open a jpg image into a new tab, shows me a bunch of strange characters instead of showing me the image, in Mozilla it pops in the "Save image" insted of open it.
Thank you in advance!
You got an JPG which uses CMYK instead of RGB encoding, and Firefox/IE choke on such files. You just need to convert the JPGs to RGB colorspace, or in Photoshop you can save image like " Save for web"
The server is sending images with text/plain MIME type. The "strange characters" are the text form of the image bytes.
On a nginx server, add the following to /etc/nginx/mime.types to make sure it serves jpg files as an image.
types {
image/jpeg jpg;
}
For an Apache server, create an .htaccess file in the same directory as the images. Add the line:
AddType image/jpeg .jpg
I found the problematic plugin, it's called "EWWW Image Optimizer" which converts the JPG images to WebP format. They have an alternative rewriting in case the images are served from a CDN which seems to not be working yet.
Thank you for trying to help me!

Including a gif in html page

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).

jpg image not getting rendered in HTML

I have one jpg image which is getting rendered in FF but not in IE6.
<img src="Image/warn.jpg" alt="aimage" />
Path is correct as this is working on FF. any clue?
Well, the file name would be server-side so it shouldn't matter if you use IE6 or FF or Chrome or Opera. IE6 is probably able to find the file, just not to display it.
With JPG files, there is an option to store it as progressive or as a lossless JPG file. It's likely that this image happens to be in a file format that IE6 just doesn't understand. The lossless JPG format is slightly newer than IE6, I think.
Is it really a jpg image, isn't it e.g. PNG with wrong suffix? Have you tried to use directly the url of the jpeg image?
try to right-click the image and then click properties, in the properties click the security tab, and in the security tab I think you should just add user group.