I am not able to reference a URL pointing to an image stored within Foundry within the code sandbox.
While the following works in the HTML widget, it does not work in the code sandbox:
<img src="https://<stack-name>.com/blobster/api/salt/<resource-id>"
alt="" width="200" height="200">
To use the tag within the code sandbox you will have to encode your image using base64. The resulting data URL can be decoded by the code sandbox and the image will be displayed. You can read more on data URLs and base64 here. To encode your image into base64 you can use any tool in the internet that lets you upload an image and returns a valid data url.
Example data url:
Related
i am using django and i have a method that generates a URL for a certain map on geojson.io
Now i am trying to implement this into my html code. When using a button that opens a new tab with the url everything works fine, but now i want to embed this onto my page instead of opening a new tab when clicking a button. So for this i read about "iframe". Now the problem is when passing my URL to src into "iframe" it doesnt display the map into the frame but rather opens the URL as if one would type the URL into the browser.
I tried it using an absolut path and using a variable, both had the same result as mentioned above.
Is this a problem with geojson.io or am i doing something wrong with my code?
The URL is encoded with encodeURIComponent doing it in django with the urllib package.
Here is my html code i implemented with the absolut path of the generated URL.
<iframe id="Example"
title="Example"
width="300"
height="200"
src="http://geojson.io/#data=data:application/json,%7B%22features%22%3A%20%5B%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B8.6792%2C%2050.1171%5D%2C%20%22type%22%3A%20%22Point%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%2C%20%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B11.5727%2C%2048.1404%5D%2C%20%22type%22%3A%20%22Point%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%2C%20%7B%22geometry%22%3A%20%7B%22coordinates%22%3A%20%5B%5B8.6792%2C%2050.1171%5D%2C%20%5B11.5727%2C%2048.1404%5D%5D%2C%20%22type%22%3A%20%22LineString%22%7D%2C%20%22properties%22%3A%20%7B%7D%2C%20%22type%22%3A%20%22Feature%22%7D%5D%2C%20%22type%22%3A%20%22FeatureCollection%22%7D">
</iframe>
So my question is, how do i embed a generated geojson.io URL with "iframe" (or others) and why is it linking to the site instead of displaying it in the frame?
I am working on angular 4 along with node and MySQL. I have saved my image .SVG in blob form but when i getting it back from API it is not able to get rendered on my browser. When i inspect it is showing me <img src="unsafe : asd......."> and when i remove unsafe then it is showing me the actual image. I am stuck on this problem.
Help Needed.
<img src="data:{{asd.asd_logo_type}};base64,{{ico.ico_logo}}" alt="...">
unsafe keyword is automatically gets added image base64 string
I'm trying to get a live image from a camera using basic authentication in the url string.
To confirm that this works, writing something like the below into the browser works:
http://user:password#ipaddress/path-to-live-stream
But if I put the same url into the 's src attribute:
<img src="http://user:password#ipaddress/path-to-live-stream" />
This, however, does not work.
Even if this is by design or not, how can I make this work? How can I use basic url authentication to get a live stream or image from any source?
I had an HTML Object tag like this:
<object class="someclass" id="someid" type="image/svg+xml" data="/relative/path/to/svg/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
This displayed my SVG image file fine. However, I wanted to move the SVG image file outside of the website root, so that users that do not have an account cannot see the file. So the data attribute would become a link to an intermediate page, which would construct the path to the SVG image and show it to the browser.
Now I have:
<object class="someclass" id="someid" type="image/svg+xml" data="/some/intermediate/page?image=/parameter/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
However, this does not display the image. When I use an Img tag instead, it does display when I right click it and select 'view image'. I tried things such as urlencode the query part of the URL, urlencoding the entire string, replacing the question mark for %3F, switching between Object and Img tags, but it does not seem to work.
Thanks for the help!
The problem ended up being HTTP header information. SVG images have to be served as header('Content-type: image/svg+xml'), and not just as XML
Though the OP has solved his problem, I came across a similar error in which the object tag was unable to render the data. The error turned out to be due to the X-Frame-Options, which in some cases is by default set to DENY.
If this is the case, you need to set to the appropriate value to be able to render.
Is it possible to embed an image in my html code and make it avaible in offline mode. My goal is to create an html file without any other files associated with it.
Thanks
Yes.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
Taken from http://en.wikipedia.org/wiki/Data_URI_scheme#HTML
You'll need a proper DataURL for your image. Try a utility like http://dataurl.net/#dataurlmaker to get the DataURL, which you can then copy into your html.