I have a very weird error that occurs with SVG images:
<img src="https://faviconer.net/img/arrow-right-dark.svg" alt="Next">
Here is an example.
While the image is available when viewing it directly, it doesn't display when used as a "src" for an image from a different domain. It's true for any .svg images. PNG, GIF, JPEG and other images are fine.
Faviconer net runs through Clouldflare CDN. Could that be a problem?
Thanks in advance.
It appears that having incorrect content type in the header makes a browser unable to identify an svg image as image (unlike other image types). So it has to have content type:
image/svg+xml
Related
I'm trying to build a website with HTML. I'm using an img tag to display an image. When the src links to a WEBP file, it works fine. However, when I replace that WEBP with a JPG, it no longer works. Have tried .jpg and .jpeg extensions, as well as no extension. I know that the path is correct because WEBPs work fine. Any idea what the problem is? The image displayed instead is a standard broken image logo. Thanks.
Having issues getting a Tiff image I'm receiving from USPS to render into a base64String and then display successfully using an html image tag.
MY guess at this point is either the image is corrupted in some way that dose not allow it to be converted into correct base64. Or, I am missing something when trying to display the image.
I can "successfully" convert the image to a base64String using the base .Net conversion library and several other online converters. No issues from what I can tell there. But when I go to display the image I'm unable to get it to render.
<img src="data:image/tiff;base64,{myBase64String}" alt="Return Label Image">
The full image source with my base64 string,
https://jsfiddle.net/h8qzn9g0/
The Tiff image in question:
https://kibocommerce-my.sharepoint.com/personal/aaron_jones_kibocommerce_com/_layouts/15/guestaccess.aspx?guestaccesstoken=J0lu1b8DSkH5Y2AhZoORnXtaBoXS%2bh81%2bDbvePlIgGY%3d&docid=18737654320874e94812de23beb09904f&rev=1
Any help or suggestions appreciated.
Your encoding is fine, if I paste it into the box at http://www.freeformatter.com/base64-encoder.html and hit "Decode and Download" it downloads the image. The fiddle works in Safari, but not other browsers. Main issue is that most browsers don't support TIFF.
https://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support
You will need to change to a different image format, maybe PNG or JPG, before you can use the data URI in all browsers.
Im creating an email template with a gif, but gifs animations doesnt work in Outlook. I know that Outlook loads the first frame of the gif, but in my case, this first frame is a white frame.
Is anyway to load other image (a jpg image for example) ONLY in Outlook???
Thanks.
Gif normally are blocked by mail services.
If you create an HTML template you can put a .jpg or .png without problems.
You can also put an image without problems although it can be blocked.
I have successfully filled my SVG path with an image using this little trick:
Fill SVG path element with a background-image
However, when I load the svg file in my html page using background: url(), it doesn't show up.
Here is my svg image opened in browser:
And here is the same svg image on my html page:
Does anyone know what might be going on here? Thanks.
SVG files loaded into <img> or as a background-image have to be completely self-contained. They cannot refer to external files (as in the image you are loading into your pattern).
What you can do to work around it is to embed your pattern image as a Data URI".
<image xlink:href="data:image/jpeg;base64,..." .../>
I am running IIS 6, I know it is out dated but that is what I am stuck with. I am wanting to use svg files for image src. I added the .svg mime type of image/svg+xml and I can request svg files through the browser and it displays correct instead getting 404 errors. I don't care about supporting IE 8 or older so I don't need a fallback image.
The problem now is that if I put this in my html I get an empty image but I put this url in the browser the svg image show fine.
This works
http://localhost/test.svg
This does not work
<img src="test.svg" />
So how do I get the svg image to show as an image in my html?
This issue ended up being that the SVG file that was generated did not have the width and height specified.