I am trying to use a SVG and nothing is being displayed. The png version of the file works as expected.
<img src="typewriter.svg" alt="typewriter svg">
I have searched and there seems to be a issue with chrome and SVGs but I don't think thats the issue here.
Here is how it should work:
<object data="typewriter.svg" type="image/svg+xml">
<img src="typewriter.png" />
</object>
Related
My question is ow can i display images using <img> tag in simple HTML 5 files?
I tried the test.html shown file below with my wampserver both online and offline. But the result was almost same.
File paths are
C:\wamp\www\fluid\SMS\test\test.html
C:\wamp\www\fluid\SMS\test\stack.jpg
C|/Users/aimme/Desktop/stack.jpg
Here is the test.html
<html>
<head>
</head>
<body>
<!-- works on internet explorer
doesn't work on other ff & chrome -->
<img src="file:///C|/Users/aimme/Desktop/stack.jpg" alt="stack img from my desktop" width="500" height="100"/>
<!--doesn't work on ie,ff or chrome-->
<img src="stack.png" alt="stack img from same folder" width="100" height="100"/>
<!--doesn't work on ie,ff or chrome-->
<img src="cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png" alt="stack img from site" height="100" width="100">
</body>
</html>
Here are the results.
How this is seen in Internet explorer version 11.0.9600.17031
How this is seen in firefox 40.0.3
How this is seen in chrome 47.0.2503.0 dev-m (64-bit)
A few things:
I suspect Chrome and FF don't like the pipe character in "file:///C|/Users/aimme/Desktop/stack.jpg", which is why it fails there.
If your file is named stack.jpg, you need to include the .jpg extension for it to work.
You want to use the protocol in your remote URL, or it'll be treated as relative: <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png" alt="stack img from site" height="100" width="100">
Note that there is no closing tag. It's one of the few elements that doesn't use them.
<img src="Desktop/stack.jpg" class="flr" alt="Lake Atitlan, Guatemala" width="300" height="240">
Provide relative path to image.
For more detail please refer following link:
http://www.html-5-tutorial.com/image-element.htm
Try
<img src="stack.jpg" />
With the file stack.jpg in the same directory as the HTML file.
For remote files put in the complete URL i.e. http://...
I am trying to embed a PDF on a web page, but it isn't showing up. This is the code:
<object type="application/pdf" data="http://www.sunshinesam.com/v/vspfiles/downloadables/Father'sDayPrintable2015.pdf" height="600" width="400">Father's Day Printable 2015</object>
What do I need to change to make it work? Thanks!
A pure, non-javascript way to this would be to do exactly what you're doing now, but add a link. Some thing like
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>Alternative text - include a link to the PDF!</p>
</object>
I need help regarding using the foreignObject tag in svg.
I have the following code which I am trying it to make it work in IE11.
<svg>
<switch>
<foreignObject x="43" y="184" width="220px" height="26px"
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<body xmlns="http://www.w3.org/1999/xhtml">
<input id="lpnz_dup" class="diagTextArea" style=" width:216px;" placeholder=" eg: trust"/>
</body>
</foreignObject>
</switch>
</svg>
Here is the link to a fiddle http://jsfiddle.net/pratik24/2FLru/1/. works well in chrome and firefox. Doesnot work in IE11, havent checked whether it works on IE10,9.
I searched for a solution, but unsuccessful. Had anyone faced the same problem and know a workaround
I used Chrome & Safari browser to view live streaming.
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="opaque"></param>
<embed id="SIPCtrl" type="application/xxxxx-plugin" wmode="opaque"></embed>
</object>
</div>
I also try to set like:
<div style="position:relative; z-index:0;">
<object>
<param name="wmode" value="transparent"></param>
<embed type="application/xxxxx-plugin" wmode="transparent"></embed>
</object>
</div>
I have another div to show pop up message. I already set Z-index:1000 but it still doesn't show above the live streaming video (embed plugin). None of those two html could works.
HTML code: http://jsfiddle.net/8C2py/3/
Screenshot:
[Result]: Now is working in Chrome (add iframe), but no luck in Safari browser.
Can anyone tell me my mistake?
Thanks a lot.
Add wmode="opaque" to the object / embed tag parameters and see if it helps.
pretty hard without seeing the entire code....try this
<div style="position:relative; z-index:0;">
on your container div. note: if you set z-index to negative on your container flash won't show up. doesn't look like you are using flash, but i'd avoid it anyways, just in case.
<html>
<body>
<img id="j_id58" width="800" border="0" height="400" src="c:/test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png"/>
</body>
</html>
Why does this not render any image when I open it on firefox but does it on IE 6?
I bet this will work if you use a file:// URL instead of a filename.
<html>
<body>
<img id="j_id58" width="800" border="0" height="400"
src="file:///c/test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png"/>
</body>
</html>
Try that.
Firefox doesn't support using the "C:/"-style path.
Instead use a relative URL or a real URL to that file hosted by a web server.
IE6 does support this.
Firefox requires the "file:///"-prefix when referencing local files.
In addition to the answers above, this is likely to fail if you load your HTML from an HTTP server.
This is likely because you need a src attribute with a file:\\ scheme.
Try file:///C://test/tmp/imageEE3A7BA3F55BC67061FD778F1B0136D6.png in the src and see if it works.