I have this image:
<img src="images/myimages.png" alt="">
It works only using Safari. It's not shown in Chrome, firefox or Safari 'Mobile' (iPad, iPhone).
Any reason?
Your file seems to be a PSD (Adobe Photoshop) file that has been renamed to .png.
Store it as a proper PNG.
Related
I have an application where images are generated in c# code and rendered on browser using data uri. None of the images are showing in IOS, not even in Chrome.
https://jsfiddle.net/z82dpqj1/1/
<img src="src="data:image/bmp; base64,***">
Please guide.
Remove the space between ; and base64.
<img src="src="data:image/bmp;base64,***">
Tested with Safari on iOS-14.4
EDIT: Here is screenshot from my iPhone. Are you sure its not your browser?
I have two images in my html page that are of webp file type.
<img src="./assets/beros-capak.webp" class="article-image" />
<img src="./assets/mapa.webp" class="article-image" />
But, as you can see in the image above, the first webp image is not loaded and the other is loading fine.
I have tested it on chrome, firefox and safari on iphone, and they are all not loading the first image, while both on android and mac pc load both images with no errors.
Why is that?
It depends on the version of iOS.
All browsers on iOS use WebKit so they are all subject to the same compatibility issues as Safari.
According to https://caniuse.com/webp, WebP is supported on iOS 14 and up.
My SVGs are not rendering clearly in Firefox. Other browsers such as Chrome, Opera, and Safari seems to render fine. My Firefox version is 72.0.1
I'm displaying my SVG as:
<img src="assets/name.svg"/>
This is how it looks in the Opera Browser:
And here is how it looks in Firefox:
Based on how you display the svg, you are putting it inside an img tag, which actually works, but the thing here is, the svg edges are not rendered sharp in Firefox.
As a workaround you can link to an SVG file and also retain the ability to affect its parts with CSS by using object tag.
<object type="image/svg+xml" data="wtf.svg" class="svg-logo">
<!-- wtf.svg will render here -->
</object>
This will work fine in Firefox.
*Note: this will also work fine in Chrome, Opera, Safari.
Why is Chrome rendering so badly?
What am I doing wrong?
PNG fallback for chrome can't be the only solution for this right??
This is how I save the file:
I have faced next strange behavior in Firefox when use ico file as src in img tag.
When It opens in Firefox (latest version), it has 16x16 format despite of the fact that ico original format is 128x128.
In other browser (Chrome, IE) everything works great.
Just open elephant-128x128.ico in Chrome and Firefox and you will see the difference.
<img height='128' src="http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico">
https://jsfiddle.net/qwx2sxzg/1/
or
http://icons.iconseeker.com/ico/cloth-dolls-icons/elephant-128x128.ico
Does anybody has idea how to fix this?
Your best bet is to convert ico files to another format, since it is not compatible with all browsers.
Image Format Support For Web Browsers
There is no other workaround for it.