Why image is not displayed in browser? - html

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-

Related

Why do images display in raw file URL, but NOT in html display using Chrome? Other browsers are fine

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.

Chrome Image EXIF Orientation Issue

I'm building a web app that shows pictures. Most of the pictures were taken by smart phones and have EXIF rotation information.
I'm exposing a url which return the image blob without modification.
I've notice that when I put this url in img tag Chrome does not respect the EXIF orientation data but when I put the url in chrome address bar it show a page with the image and then it does respect the EXIF orientation.
Sorry I can't share the image, I'll try to find another example that I can share.
Has anyone notice this problem?
The reason for this behavior is that Chrome auto-rotates pictures based on EXIF data only if they are displayed directly in a browser tab as the main document.
The relevant chromium issue that tracked this implementation is the following:
https://bugs.chromium.org/p/chromium/issues/detail?id=56845
In the future, Chrome (and other browsers) will allow developers to enable auto-rotation also for images displayed via img tags with the CSS image-rotation property:
https://bugs.chromium.org/p/chromium/issues/detail?id=158753
Update: as of Chrome 81 (moved to stable on 5/13/20), this behavior is supported in both img tags and backround-image tags. https://www.chromestatus.com/feature/6313474512650240

HTML automatically rotating images on render

Can someone help me here. I have a PHP script which uploads an image and resizes it, and then an HTML page which displays the image. However, for some reason the HTML is rendering a rotated version of the image, although I can't for the life of me see why.
<div style="height:75px;width: 116px; background: url(http://viralsmods.com/pokeroulette/content/images/7.jpg);"></div>
Run the above snippet to see it in action. The image it is linked to is here: http://viralsmods.com/pokeroulette/content/images/7.jpg.
Any idea on why this could be?
The problem is related to EXIF (Exchangeable Image File Format) and the web browser
Basically, EXIF is a standard for holding file info such as which way an image should be rotated. Photos taken with (older) devices that do not use EXIF may not appear correctly in your web broswer.
The solution is to bring this file into photoshop, rotate as needed, save, then reupload for your site.

Image would not like to open in IE10 and Mozilla

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.

Problems adding Background Image when creating theme for Chrome

I am presently following this guide: http://code.google.com/p/chromium/wiki/ThemeCreationGuide
to create a theme for Google Chrome.
Everything seems to work fine, the only problem i have is applying a background image to the browser. The "theme_ntp_background" that supposed to point and load the background-image seems not to be working :(
Any ideas on what may be wrong? it is definitely not the file path, i ensured this was correct.
Thanks!
Chrome can only load png images in themes, so make sure that the image you're trying to use is a png file.
It would also help if you posted the code found in the manifest file for this theme.