I upload image to server and try to load it in different browsers.
I'm using this type of code:
<img alt="Name2.jpg" src="http://www.website.net/addVid/maker/Name2.jpg">
This is result:
Chrome: Working fine.
Opera: Working fine.
IE10: square with cross.
Mozilla: says " The image blablabla.....cannot be displayed because it contains errors.
I have NO idea why it's happens.. any suggestions?
URL provided in src is not valid
src="http://pcplacements.com/wp-content/uploads/Hello-Picture.gif"
once try this.
The link that you provided is invalid however I am assuming that you did not want to post the actual URL for whatever reason.
Why are you trying to load the image via URL, just import the image over to your server and then access it:
<img alt="Name2.jpg" src="FileDirectory/Name2.jpg">
problem is with the image. the image only contains the error, once replace the image and try again, i am sure it will.
Definitely.
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.
In IE 11
when https://localhost:8070/resource/6fbe89333dbd691683c1a781f6ccb828f32f433c/0/S.jpg
I am able to see the image
But when I put this into html
src of img tag in html
The image is not displayed and showing 'X' on screen
pretty hard not knowing the directory of the files , do you store it in a img folder?
I tried to test the issue on my side and found that it is working fine on my side.
Test code:
<!DOCTYPE html>
<html>
<body>
<img src="http://localhost/pineapple.jpg" alt="Smiley face" width="150" height="150">
</body>
</html>
Output:
Looks like you have some issue in your HTML code or issue with some IE settings.
Try to check and verify that the image path is correct and the image is available there.
Check that your HTML code is correct.
Check the console to see whether there is any error or warning.
Check the code using developer tools and see the image related code to find the issue.
If the issue persists then try to post your sample HTML code.
Seems there is an issue with IE only if the actual image format is different than the extension of the file .
The issue happens only with local files, and if you just changed the extension of the image to the actual format eg: gif, it will work
assume test.jpg file is located beside the html file then
<img src="test.jpg"/>
this will not work in IE
if you just change the extension to
<img src="test.gif"/>
then it will work
I have base64 converted image and put on container background like this:
background: url('data:image/png;base64,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');
Chrome and other browsers open it without any problem, except Mozilla Firefox. It show me blank image and when I try to open image manually, it gives me error:
The image: "data:image/png;base64,iV...5CIIA=" cannot be displayed
because it contains errors
Any ideas why this happens and how to fix?
Here is the fiddle to try: http://jsfiddle.net/zur4ik/QUXV5/
Looks like there's something wrong with the actual base64 data. See similar working example based on a image/png;base64 file.
Try using these tools to encode and decode your files.
I just set up my website on Namecheap, which I built in HTML and Twitter Bootstrap.
I am using the following tag for images
<img src="images\myimage.jpg">
This works fine in Chrome and in Firefox if I open it locally, but from my domain, the images don't show up in Firefox. It's still working fine in Chrome. I even tried this and got the same result:
<img src="file://localhost/images\myimage.jpg">
I just tried Fiddler2 and I get 404 messages that say under the url http://myurl.com/images%5Cmyimage.jpg
EDIT:
I just figured it out my code was accident a "\" instead of "/" which only affected firefox, thanks for all the help
<img src="images/myimage.jpg" alt="" />
/ instead of \, also close the image tag and add the alt-attribute or your HTML will not validate.
Edit:
Appearantly the /> is not mandatory, but the alt is...
This line of code is good
<img src="images/myimage.jpg">
you simply need to add a folder name images in the same folder where your html is stored. Make sure you got the file you are looking for in your images folder
edit : I just saw your new comment. Try adding an alt attribut to your image like this
<img src="images/myimage.jpg" alt="The image isn't showing">
At least you will know if the browser got the tag correctly
I figured it out I wrote it incorrectly in my original question but the "\" should have been a "/". This only affected firefox
I was also getting the same problem, so if it's showing the image in chrome and not in firefox open your Html file in chrome and right-click on the image and copy the link address use the same link address in the img src.
below screen shot describes my problem.. The image src is correct as the image can be seen in firebug, but I am unable to display the image in browser.
Can anybody tell what I am missing ???
Security restrictions in some browsers prevent pages hosted on HTTP from embedding images using file: URIs.
See the solution given below, and see your image path, you will understand it automatically-