In markdown, I would like to embed a base64 image data uri.
Is there any way to resize the rendered image in markdown?
As per this answer, it is allowed and encouraged to use HTML within markdown. So you can embed and resize a base64 image using the img tag in HTML by adding the data uri in the src attribute as follows.
<img width="20" height="15" src="data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
Related
I have a NodeJS.Readablestream which is a png image
How do I append it to dom? I'm trying to do this in the browser. I can't just add it to the <img> since it only has src="" which is supposed to be an url.
I am trying to embed an image inside HTML which is generated by an azure function. when I run it in localhost I am able to see the image, but when I convert that to an azure function it throws a broken thumbnail image.iam using matplotlib to save the plot
plt.savefig(f'{basepath}/plot.png')
this will save it to a temporary path and then I am using it inside my HTML content
<div class="image">
<img src="""f'../{basepath}/plot.png'""">
</div>
on inspecting the page also iam able to see the correct path, though not the image
converting the image to a base encoded version
encoded = base64.b64encode(tmpfile.getvalue()).decode('utf-8')
and calling that inside the HTML worked for me
<img src="""f'data:image/png;base64,{encoded}'""">
I'm trying to post a picture to a file on my Gitlab using markdown
seems to work but is far too large.
Other solutions I've tried and don't seem to work are as follows:
<img src="https://gitlab.com/example/screenshot" width="48">
<img src="https://gitlab.com/example/screenshot" alt="Drawing" style="width: 200px;"/>
Any ideas on what I can do rather than re-sizing every image I have?
Raw HTML works
Try the following: after uploading your image, use img tag with src pointing to the path of uploaded image, for me it's working:
The following is from one of my files
<img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120" height="120">
Check this link, where I've put different size of same image https://gitlab.com/Basel.issmail/resize-image/wikis/resizing-image
There is an issue on gitlab discuss Add control over images with Markdown
GitLab 15.7 (December 2022) adds an official support for this:
Change the dimensions of images in Markdown
Before this release, there were no controls for changing the size
of images rendered within Markdown text areas.
This often led to unwieldy images with no control over how much space they took up in descriptions and comments.
You can now set the width and height of how images are rendered directly
in Markdown by appending the {width=x height=y} attributes to the image reference. Sizes can be specified with pixels or percentages.
See Documentation and Issue.
Following code give good result: (the URL set in tag is the one generated by Gitlab when attaching a image)
![]() <img src="/uploads/d19fcc3d3b4d313c8cd7960a343463b6/table.png" width="120">
It shows a clickable thumbail with a fixed width (and keep image ratio).
Is it possible to have an Icon tag use a Base64 Encoded image? I've tried it without success, using data:image/png;base64, prepended to the encoded data for the image, but I still get the red X when I load the KML.
Overlays (screen overlay, ground overlay, etc.) and icon images via Style references in KML are referenced only as URLs either absolute or relative not as inline base64-encoded content which is allowed in other XML standards.
Icon Style example with absolute URL:
<Style>
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal3/icon21.png</href>
</Icon>
</IconStyle>
</Style>
Ground Overlay image example with relative URL:
<GroundOverlay>
<Icon>
<href>etna.jpg</href>
</Icon>
</GroundOverlay>
In theory a URL could be referenced in KML with "data:image/png;base64..." but that usage is NOT defined in the official KML standard nor implemented in Google Earth.
It is possible to have base64-encoded images and access them via HTML and JavaScript code in a KML feature description but that is outside the context of KML and not applicable to seeing red X's. KML supports most JavaScript so that may be possible to display inline images in the description balloon.
In short, the image or icon cannot presently be base64-encoded for overlay images or icons displayed on the map that are referenced in the KML but you can compress the images and refer to them relative to the KML as entries inside a KMZ file. By including the images in a compressed KMZ file there would be no need to base64 encode the images in the first place.
<img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIC04NjUuMzU4Mjg5OTIwMzI5MSAxMDM0LjA4ODkyNDQ5OTIwNjUgOTAzLjA0MjIyMTE2NTUiIHN0eWxlPSJ3aWR0aDogMi4zNjdleDsgaGVpZ2h0OiAyLjA4OGV4OyB2ZXJ0aWNhbC1hbGlnbjogLTAuMTM5ZXg7IG1hcmdpbjogMXB4IDBweDsiPjxkZWZzPjxwYXRoIGlkPSJNSk1BVEhJLTc4IiBzdHJva2Utd2lkdGg9IjEwIiBkPSJNNTIgMjg5UTU5IDMzMSAxMDYgMzg2VDIyMiA0NDJRMjU3IDQ0MiAyODYgNDI0VDMyOSAzNzlRMzcxIDQ0MiA0MzAgNDQyUTQ2NyA0NDIgNDk0IDQyMFQ1MjIgMzYxUTUyMiAzMzIgNTA4IDMxNFQ0ODEgMjkyVDQ1OCAyODhRNDM5IDI4OCA0MjcgMjk5VDQxNSAzMjhRNDE1IDM3NCA0NjUgMzkxUTQ1NCA0MDQgNDI1IDQwNFE0MTIgNDA0IDQwNiA0MDJRMzY4IDM4NiAzNTAgMzM2UTI5MCAxMTUgMjkwIDc4UTI5MCA1MCAzMDYgMzhUMzQxIDI2UTM3OCAyNiA0MTQgNTlUNDYzIDE0MFE0NjYgMTUwIDQ2OSAxNTFUNDg1IDE1M0g0ODlRNTA0IDE1MyA1MDQgMTQ1UTUwNCAxNDQgNTAyIDEzNFE0ODYgNzcgNDQwIDMzVDMzMyAtMTFRMjYzIC0xMSAyMjcgNTJRMTg2IC0xMCAxMzMgLTEwSDEyN1E3OCAtMTAgNTcgMTZUMzUgNzFRMzUgMTAzIDU0IDEyM1Q5OSAxNDNRMTQyIDE0MyAxNDIgMTAxUTE0MiA4MSAxMzAgNjZUMTA3IDQ2VDk0IDQxTDkxIDQwUTkxIDM5IDk3IDM2VDExMyAyOVQxMzIgMjZRMTY4IDI2IDE5NCA3MVEyMDMgODcgMjE3IDEzOVQyNDUgMjQ3VDI2MSAzMTNRMjY2IDM0MCAyNjYgMzUyUTI2NiAzODAgMjUxIDM5MlQyMTcgNDA0UTE3NyA0MDQgMTQyIDM3MlQ5MyAyOTBROTEgMjgxIDg4IDI4MFQ3MiAyNzhINThRNTIgMjg0IDUyIDI4OVoiPjwvcGF0aD48cGF0aCBpZD0iTUpNQUlOLTM0IiBzdHJva2Utd2lkdGg9IjEwIiBkPSJNNDYyIDBRNDQ0IDMgMzMzIDNRMjE3IDMgMTk5IDBIMTkwVjQ2SDIyMVEyNDEgNDYgMjQ4IDQ2VDI2NSA0OFQyNzkgNTNUMjg2IDYxUTI4NyA2MyAyODcgMTE1VjE2NUgyOFYyMTFMMTc5IDQ0MlEzMzIgNjc0IDMzNCA2NzVRMzM2IDY3NyAzNTUgNjc3SDM3M0wzNzkgNjcxVjIxMUg0NzFWMTY1SDM3OVYxMTRRMzc5IDczIDM3OSA2NlQzODUgNTRRMzkzIDQ3IDQ0MiA0Nkg0NzFWMEg0NjJaTTI5MyAyMTFWNTQ1TDc0IDIxMkwxODMgMjExSDI5M1oiPjwvcGF0aD48L2RlZnM+PGcgc3Ryb2tlPSJibGFjayIgZmlsbD0iYmxhY2siIHN0cm9rZS13aWR0aD0iMCIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAwKSI+PHVzZSB4bGluazpocmVmPSIjTUpNQVRISS03OCI+PC91c2U+PHVzZSB0cmFuc2Zvcm09InNjYWxlKDAuNzA3MTA2NzgxMTg2NTQ3NikiIHhsaW5rOmhyZWY9IiNNSk1BSU4tMzQiIHg9IjgxNiIgeT0iNTEzIj48L3VzZT48L2c+PC9zdmc+' />
Here's a sample fiddle: http://jsfiddle.net/elhoyos/KL489/
I took the liberty to include the deps glyphs MathJax provides in another SVG element of the same document.
When you embed SVG within html namespaces are optional when you reference a file where the svg node is the root then they are not.
You are missing the SVG namespace in your encoded data i.e. you need
xmlns="http://www.w3.org/2000/svg"
on the root node.
Your example works for me with that change.