I have a base64 string and i need to show it in my IE browser i tried with appending the
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
the above syntax it works fine in Firefox but does not work in IE ??
Any idea how d o i make my image be shown ? I am trying to set the src attribute from my code asp.net page code.
Thanks
This should work in IE
<img src="data:image/gif;base64,<YOUR DATA>" alt="Base64 encoded image" width="150" height="150"/>
IE limits this in-line size to 32KB..
But there seems to be something wrong with your base64 data. It does not work on my tests in chrome,IE or anything.
http://jsfiddle.net/ppumkin/5JAjh/
Related
I'm using BatmanJs and Rails. I used carrierwave for uploading pictures and all worked fine. But, I am unable to show the image. The model has the attr photo.url which works fine. But I don't know how to bind a image tag.
I tried the following, with no result:
<img data-src="post.photo.url" />
<img data-bind="post.photo.url" />
But if I use
<span data-src="post.photo.url"></span>
it shows the url perfectly.
Kindly suggest how do i get it to work for img tag.
Very close! try data-bind-src. Actually, you can use data-bind-#{anything} to bind html attributes to keypaths.
Test Color <font color="#ffcc99">This is Color</font> --> Google Chrome
Test Color <FONT color=#ffcc99>This is Color -- > IE 8
When i save the text using ajax html editor extender with font color change in google chrome it works fine but when i do the same in IE8 the text changes into a different format mentioned above which doesn't work.
How can i solve the same?
This forum post helped me: http://forums.asp.net/t/1751476.aspx
When you read or write the html, just use Server.HtmlDecode(whatever your html is);
Also, on postback, I had to do this:
htmlEditor.Text = Server.HtmlDecode(htmlEditor.Text);
I have an iFrame that I use to display different media types by setting the "src" attribute. When I set the src to a .png file type however, Firefox does not render the image for me, but instead asks the user if they want to download the image.
Is there a way to force it to render? Is this a client issue / feature or is it something I've missed?
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://localhost:54468/Docs/Media/Partners/Logos/logo.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
The src property of an iframe is not meant to be an image but rather an URL of page containing HTML. Firefox is asking you to download the image because the server is writing the image bytes to the response stream.
Use an img element to display images.
I tested your code but using a different image source:
<iframe id="ctl00_mainContent_uxEditClient_ifrmThumb" width="100px" height="100px" src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png">
<html>
<head></head>
<body></body>
</html>
</iframe>
I think the problem is not related to Firefox or HTML, I guess it is the header your server is sending. HTTP header may force the browser to download instead of visualizing.
Please test my code in your specific Firefox version.
I'm working with client's CMS and it's adding images like this and i can't change this.
I tried IE7.js but it's not working
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1" />
Unless whatever code runs behind imagefolder dislikes additional, unknown arguments, you might be able to trick the IE hack into thinking it's a .png:
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1&dummy=.png" />
I am using a CMS for images which is by default not generating alt attributes in image tags unless the alt text is provided.
I can provide an empty space " " into the alt tag to produce :
<img src="../.." alt=" "/>
Would this be a problem with screen readers, and web accessibility ?
There are three ways that HTML authors can write ALT text on their images:
With no ALT attribute given
With an ALT attribute that doesn't contain any readable characters
With an ALT attribute that can be read
These are handled in different ways.
In the case of an image that lacks an ALT attribute, like this:
<img src="fruit.png" width="100" height="100" />
... the default screen reader behavior is read the SRC attribute aloud. So, assuming that this image was hosted in the images folder on example.com, the screen reader would say: Graphic: h ttp://www.example.com/images/fruit.png. Omitting the ALT attribute is bad practice, because blind visitors wind up having to wade through tons of irrelevant gibberish.
In the case of an image that has an ALT attribute which does not contain any readable information, like either of these two:
<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />
... the default behavior is to silently pass over that image. The screen reader cannot pronounce a space or an empty string; and so it says nothing. This is the correct way to suppress the announcement of purely decorative images. Note, however, that the most recent WebAIM screen reader usage survey found that most blind users want to know an image is there even if it doesn't convey much to them. So be judicious in suppressing images with empty alt text; use it only when there really is zero information conveyed by the image.
Lastly, of course, is regular alt text:
<img src="fruit.png" width="100" height="100" alt="Photo of apples." />
In this case the screen reader will say "Graphic: Photo of apples." Putting a period in makes the screen reader pause at the end of the ALT text.
Picking good ALT text is important, and can be hard. In general, if your image contains a picture of text, then you should reproduce that text (or a suitable abbreviation of it) in your ALT text. If it is illustrative or photographic, your ALT text should be a concise description of the photo's contents. If it's a complex image like a diagram, well, you may need to use the ALT text to direct the user to a more complete description elsewhere in the page. (The LONGDESC attribute was designed for this purpose, but isn't widely supported by screen readers.)
If your image is also a link, it's absolutely vital to have sensible ALT text; otherwise your blind visitors won't have any idea what the link does.
I recommend getting a screen reader (such as NVDA, which is open source) and testing with it. It can be -- excuse the bad pun -- an eye-opener.
If you are not using an alt text, you can go without the alt attribute. It won't validate, but it won't change a thing, it will work exactly the same. You are just pleasing the validator.
Using a space shouldn't bring any problems.
only problem is the customer wants the site to state that it is XHTML compliant - so we need the pages to validate :(