Data URI not working in Chrome anymore, why? - html

In asp.net MVC I was loading blobed images from my db this way. It was displaying correctly on all browsers.
using the following
<div class="blogImage">
<a href="~/WaiGuoAtHome/ImageHtml/#Model.Id">
<img class="img-responsive homePhoto100" src="data:image;base64, #Convert.ToBase64String(Model.Image)" title="#Model.Caption" />
</a>
</div>
Navigate to the following page in firefox, IE and Chrome. Same code but on Chrome the image doesn't display.
http://jacksonjhayes.azurewebsites.net/WaiGuoAtHome/ImageHtml/3646
I don't think this is a size issue, the image on that page is very big, but I display smaller images elsewhere that are much smaller.

#onetrickpony your idea did the trick. Thanks! To bad I can't just use whatever image type I want any more but that makes sense, and I think all my images are jpeg anyway.

Related

SVG images not displaying fully on webpage

I have a website where images are loaded through <img src="..." />
One of these images is RSM's logo, however on the webpage it displays as this:
<img src="https://assets.clicksminuteper.net/bots/rsm/normal.svg" />
This happens for almost all SVGs on the page, except for simple, single path shapes.
What causes this, and what ways can I fix it?
Update: This bug only appears to happen on chromium based browsers. Those show 2 of the grey bars and not the third, as well as not rendering the background.

Image is not displaying in IE

I have a site that is managed with asp.net. I want to display an image in one of my web page but that image can not be viewed in Internet Explorer but other browsers can display it, although the path is correct.
<asp:Image ID="PageImage" runat="server" ImageUrl ="~/images/PageImage.png" />
Can any body help to solve this issue?
Make sure you didn't use the CMYK colorspace when creating the image,
which IE can't handle. Saving it in RGB colorspace should fix the problem (for example, in Adobe Photoshop, use the "Save for web..." option).
Edit:
I tried resaving the image in GIMP, and it indeed works now in IE for me.
learn more here link

Why does Safari keep re-loading my logo on every page?

Just out of curiousity:
Is there something different in the way that Safari handles images compared to other browsers?
I used to serve the logo of my site as a background-image from a CSS file so that it doesn't have to be re-loaded on every page (at least that's what I thought).
I recently switched to another approach because it's more in line with what Google prefers and with what people in this thread suggest.
<h1>
<a href="http://www.mycompany.com">
<img src="logo.png" alt="My Company" />
</a>
</h1>
However, when clicking through the pages the logo keeps flickering because Safari seems to be re-loading it on every page. Other browsers such as Chrome and Firefox are fine, though. It seems that they cache the logo.png when they first encounter it.
Any idea why this happens or how to prevent it?

loading image using img src results in different size in Mozilla/Chrome

I am not an UI expert.
For one of the requirement to show the reload icon, I downloaded the 128x128 pixel reload icon from the link - https://www.iconfinder.com/icons/28464/recycle_refresh_reload_sync_icon
and used in my html page. Actually this was designed for a catcha page.
<body>
<img src="reload.ico" />
</body>
When opened in Firefox, this was shown as a small image, but when opened in Chrome, it is relatively large. What is the reason behind this?
I agree that after changing the code to ,
<body>
<img src="reload.ico" width="24px" height="24px" />
</body>
both the browsers are showing the same size. But i am interested to know why it was not in the first case.
edit: Actually I accidentally downloaded the 128x128. But then i am surprised to see this difference.
The .ico files are only supported for the favicon.
Prefer the .png files for transparent images/icons.
You can see a list of supported formats per browser at Comparison of web browsers on wikipedia

Google StaticMap image not shown in Firefox

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.