Question 201071 in Html Question posted in
Some basic documentation can be found here.

how to use alias for embedded base 64 images in html

I have to use Base64 embedded images in my html file like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'
       src='data:image/jpeg;base64, <!-- Base64 data -->' />
  </body>
</html>

but my images size are more than 200k and the base64 data part is really huge.
I need to put these image in other tag like script and attach them there on run time.

I need something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'
       src='data:image/jpeg;base64, readdata('mybase64imageid')' />
  </body>
 <some-tag id='mybase64imageid'>my base 64 image is written 
 here</some-tag>
</html>
Tags:

2

Answers


  1. 0

    To add "src" runtime into the image:

    <img style='display:block; width:100px;height:100px;' id='base64image' />

<script>
    var img = document.getElementById("base64image"); 
    img.src = "base64 for image goes here";
</script>

    If you are looking for looping you can go with:

    jQuery('img').each(function(){
jQuery(this).attr('src', 'base64 path')
});
    Login or Signup to reply.
  2. 0

    If you’re so concerned about making your code un-viewable because of a massive base64 string, why not make a separate file with your string in, and fetch it? Take this example:

    Image.txt:

    data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv

    index.html:

    <!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'>
    <script type="module">
       // Fetch using the fetch API
       let res = await fetch("./Image.txt");
       // Get it all as text
       let b64string = await res.text();
       // Set the img SRC
       document.getElementById("base64image").src = b64string;
    </script>
  </body>
</html>

    Edit: Since you just updated your question, and you wish to have it displayed in another HTML tag below, just set the tag’s ID and set the SRC to it:

    <!DOCTYPE html>
<html>
  <head>
    <title>Display Image</title>
  </head>
  <body>
    <img style='display:block; width:100px;height:100px;' id='base64image'>
    <p id="mybase64imageid">data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv</p>
    <!-- Add the 'style="display: none;"' attribute if you don't want it displayed on the page -->
    <script type="module">
       // Get it as string from the Element
       let b64string = document.getElementById("mybase64imageid").innerText;
       // Set the img SRC
       document.getElementById("base64image").src = b64string;
    </script>
  </body>
</html>

    Happy coding!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search