Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
How to render an image in .html page?
See original GitHub issueHello,
I’m trying to do the same as on the Mermaid online editor, but in my own .html page.
here is the code:
<html>
<body>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true, securityLevel: "loose" });
</script>
<div class="mermaid">
graph TD DIR("<img
src="https://iconscout.com/ms-icon-310x310.png"
;
width="30"
/>")
</div>
</body>
</html>
It’s working on Mermaid online editor here, but in my local .html page I get this error:
Any idea? Thanks a lot
edit: added securityLevel: "loose" with no success
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Images in HTML - Learn web development | MDN
In order to put a simple image on a web page, we use the <img> element. This is a void element (meaning, it...
Read more >How to render HTML to an image ? - GeeksforGeeks
The user will generate an image from the webpage and have an option to convert a particular part of the HTML page into...
Read more >Render HTML to an image - javascript - Stack Overflow
Render HTML to an image · Option 1: Use an API · Option 2: Use one of the many available libraries · Option...
Read more >Rendering HTML to an image - Ron Valstar
The trick ; const canvas = ; const ctx = ; const tempImg = ; = 'data:image/svg+xml,' ; const targetImg = ...
Read more >How to display an image in HTML? - Tutorialspoint
How to display an image in HTML? - Use the tag in HTML to display an image. The following are the attributes ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It also seems like
'is transformed into"somehow in the html code, which is a problem. Is it also due to auto-formatting?Should look like this:
DIR("<img src='https://iconscout.com/ms-icon-310x310.png' width='30' />"), but that doesn’t fit the error message...ms-icon-310x310.png" width="30">").To be honest, I wouldn’t consider this a problem being directly related to mermaid. I just tried the example in the live-editor and it works for release 8.4.7 as well.
Hi @waterdrop01, I’m closing this issue. Feel free to open a new one if it turns out to be a problem caused by mermaid. Thank you for reaching out.