Displaying Blob Image from MySQL Database into Dynamic Div in HTML

Displaying BLOB image from Mysql database into dynamic div in html

1) Base64 option

Work with a single line, image/png for a png image and image/jpeg for a jpg one :

echo '<img src="data:image/png;base64,'.base64_encode($blob).'"/>';

example :

<div style="background-color:black; text-align:center; padding: 5px;">  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwBAMAAACh2TSJAAAALVBMVEUAAADtNTX////3n5/+9fX719f7zMz5tLTzfHzuQED//f31jY3ybGzxXV3wVFRaxp+rAAAAAXRSTlMAQObYZgAAALVJREFUOMut0rENAjEQRNHdC4kY0QBaAQUQX0QAFSAKIKQEKiAA6VqgIkriApuV1x7pQPz0aWwHljLMpZ0CRDBGoXmeghGYKFJsUo90giAImCgV5OJF+oOgKE48MlGgs2VLBIunWesw0a1ZHqF82c7GmmIfUSpgotOly29DFPFJFDEhkgIT/V5mZuvj6XofKrHU6vyI4u37IYi36aN4h5tL7PJyif1dvCgEpapzISbCTEj5R78BZq5A5Ldh2XYAAAAASUVORK5CYII"></div>

Using JavaScript to display a Blob

The problem was that I had hexadecimal data that needed to be converted to binary before being base64encoded.

in PHP:

base64_encode(pack("H*", $subvalue))

dynamically display images using php mysql

Try this code

<?php
$result = mysql_query("SELECT * FROM my_image");
?>
<div class="item-block-1">
                            <div class="image-wrapper">
                                <div class="image">
                                    <div class="overlay">
                                        <div class="position">
                                            <div>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis metus non erat tincidunt consectetur. Maecenas ac turpis id lorem.</p>
                                                <a href="#" class="quickshop">Quick shop</a>
                                            </div>
                                        </div>
                                    </div>
                                  <?php                                 
                                    while($row = mysql_fetch_array($result))
                                       {
                                  ?>
                                   <div>
                                      <img src="new/<?php echo $row['name']; ?>"/>
                                   </div>
                                    <?php
                                       }       
                                     ?> 
                                   </div>
                                </div>
                            </div>

Displaying a Blob back as a Image in php without header(Content-type: image/jpg);

I know this is not a specific answer to your question, but consider that by removing that database call, you are dramatically increasing your server load, increasing the size of each page and slowing down the responsiveness of your site.

Consider any page stackoverflow. Most of it is dynamic, so the page cannot be cached. but the users' thumbnail is static and can be cached.

If you send the thumbnail as a data URI, you are doing the DB lookup and data transfer for every thumbnail on every page.

If you send it as a linked image, you incur a single DB lookup for when the image is first loaded, and from then on it will be cached (if you send the correct HTTP headers with it), making your server load lighter, and your site run faster!

How to display images from a database in php using option and select

First create dynamic class and set background-image in class then apply class in option tag

<div class="form-group col-md-6">
      <label for="inputtype">Game Type</label>
      <select class="custom-select mr-md-2" name="image_file">
       <option selected></option>
       <?php foreach($games as $image): ?>
         <script>
           .image-option<?php echo $image->image_path(); ?>{
              background-image: '<?php echo $image->image_path(); ?>';
              width:"40";
              height="40";
           }
         </script>
        <option class='image-option<?php echo $image->image_path(); ?>' value="<?php echo $image->region ?>"></option>
        <?php endforeach; ?>
      </select>
</div>

---

Related Topics