I have an image on my html that is not displayed on Chrome. If I inspect the img tag, I can see a preview, so the img url is correct. If, for example, I change some css attribute (inspecting), like img height, image also shows. The issue is that it doesn´t load when the page is ready. It works fine on Edge.
Related
I am trying to load background image to a page using Dreamweaver. It shows in IE and Edge but not Chrome or Mozilla. I have tried moving the photo's location (file path) and tried in both straight HTML and CSS with the same result. I cannot find another way to write the code or think of one (being very new to this) so that it will show in all browsers. This is the CSS code:
background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')
set in the body brackets;
and html:
<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">
Everywhere I look I find examples with ellipsis points, like url(...website.com/greanleaf.jpg) and the dots totally confuse me. I think perhaps I need help with how file paths work.
This is due to the implementation of the body and html tags in Firefox and Chrome browsers. the body and HTML tags are only as big as the HTML content of them. where as Edge and IE the HTML and Body are auto sized to the size of the view port.
Add this to your CSS
body, html{
min-height:100%;
min-width:100%;
}
Ok , so if your code is correct and the image it's shown in IE and edge try to
refresh your browser but not normally with this command : Control + Shift + R
so that you're sure to be running the latest and greatest version of what that web
site's serving.
First, you'll need to be sure that the browser is correctly locating the image.
A good way to be sure is looking at Chrome's network tab. Hit F12 in Chrome to reveal Developer Tools. Click the Network tab and then refresh the browser. You will receive a list of resources that have/have not loaded. If your image is listed in red, then it failed to load. Your problem will be an incorrect path.
This is a good resource for understanding relative file paths.
https://css-tricks.com/quick-reminder-about-file-paths/
However, if it did load successfully, the image isn't showing for another reason. Without seeing all of your code, I can only make a guess. Is the container that your image is in empty? Without content or a specified height, the background image won't show in some browsers.
I can't get the SVG Image to disaply correctly in Google Chrome 34
Example
As you can see object and iframes are working. IMG and Backgroudn image aren't working.
IE11 and FireFox can display all 4 examples correct.
The Chrome developers have chosen not to support the use of SVG fragments in images in order to protect user's privacy.
Because your SVG file only displays each shape if it is the target of a URL fragment (the part after # in the filename), nothing is displayed when Chrome strips out the fragment.
I have been stuck on this for a long time.
This page has several image icons to the left of the text content. These images get loaded perfectly fine in Chrome, Firefox, and IE9, but in IE8, they don't get loaded. IE8 is perfectly fine loading the actual image link directly, so I know it's not a fault with the image itself.
In fact, this only happens on that one page. The other pages are able to load images just fine.
Can anyone explain this huge mystery? Thanks!
the problem seems to be the css rule
.entry-content IMG
{
max-width:97.5%
}
When I remove it the images get displayed... do not know why this happens =/
edit
IE8 seems to have a problem with img tags where the width attribute and the css "max-width" attribute is set... maybe just remove on of them.
In any modern browser, when you visit an image url (eg, http://i.imgur.com/xrM9q.jpg), it automatically resizes that image and gives you the option to "zoom in" with a little magnifying glass. This is not always the case with an iframe:
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
If you link an iframe to an image, Firefox will give this nice behavior: it starts out behaving like max-width: 100%; max-height: 100%, then you can click on it to make it big.
However, in Chrome, the image is just full-size. Try opening this example in Chrome and Firefox.
How do I get Chrome to handle images "smartly"? That is to say, have the default behavior show a magnifying glass cursor and provide auto-resizing?
(To clarify: I want this to work in a Chrome extension. The only solution I've come up with so far is to put a content script on all pages and manually change styling on images on the page. That solution sucks, so I'm hoping for a method that is less hacky and doesn't effect every page the user visits)
Try making the iframe refer to another html file and in that html file put the img tag with the width and height constraint. I think it will work on most browsers this way.
I've build this image 1 and put in an src attribute of an img tag.
The image is shown if I access it directly from the browser but when I put it in a page in this way the image is not shown
<img src="$STATIC_MAP_URL" />
If I see the the image with Firebug it is shown, it's strange because Firebug show the img tag gray, as if it is hidden, but it's not.
Other browser haven't this problem and show the image as it is supposed to be.
Thank you in advance!
In addition to encoding the ampersands, make sure you encode the "|" to "%7C" too. I was struggling to get static maps working correctly on Blackberry Devices due to the pipes.