How to Retrieve Images from MySQL Database and Display in an HTML Tag

How to retrieve images from MySQL database and display in an html tag

You can't. You need to create another php script to return the image data, e.g. getImage.php. Change catalog.php to:

<body>
<img src="getImage.php?id=1" width="175" height="200" />
</body>

Then getImage.php is

<?php

  $id = $_GET['id'];
  // do some validation here to ensure id is safe

  $link = mysql_connect("localhost", "root", "");
  mysql_select_db("dvddb");
  $sql = "SELECT dvdimage FROM dvd WHERE id=$id";
  $result = mysql_query("$sql");
  $row = mysql_fetch_assoc($result);
  mysql_close($link);

  header("Content-type: image/jpeg");
  echo $row['dvdimage'];
?>

Retrieve image from MYSQL and display it in HTML

First of all you can store an image in the DB but it's not a good practice.
There are already posts about this: Example

What I would do, anyway, is:

store the image in a blob column (maybe as base64 string)

First you have to convert the image, then store it in the DB. Assuming you are using PHP, you could do something like this:

$base64 = 'data:image/' . $type . ';base64,' . base64_encode($imageData);

Then store it in the DB with a simple insert.

retrieve the image and return it as a response of a service

In mysql you should just do a select and then return it via (I assume PHP service)

browser side, to display the image: Example

This differs from what you want to do

<img src="link_to_image">

I had to do implement a solution similar to this one and works fine enough. You can encounter problems if the image is large in size (2MB for example) or if you want to fetch multiple images at once.

To achieve what you want to do, the best solution is to store the image in a file system that allows you to serve the files or , for example in AWS S3, and just save the image URL in the DB.

How to retrieve image from database and display image on the web page

you can use this code to retrieve image from database

<?php
include 'connection.php'
?>
<?php

$result = mysql_query("SELECT * FROM table") or die(mysql_error()); 


?>

<table border="1" cellpadding="5" cellspacing="5">
<tr> <th>Image</th></tr>

<?php

while($row = mysql_fetch_array($result)) {

$id = $row['id'];

?>
    <tr>

        <td><img src="uploads/<?php echo $row['pic_name'];?>" alt=" " height="75" width="75"></td>

   </tr>

<?php   
} 
}

?>
</table>

i want to retrieve image from mysql database but it is showing characters instead of image

This looks pretty simple. You tell us what are you storing in your database table. I mean your are storing the image itself or image path (including only image name) in database.
If you are storing image path (name) then you need to give right path while accessing image and if your are storing image itself in blob form then here is some help for you.

Retrieving image from database and display, and how to make that image pop up in a window for clear visibility.

You can use the modal pop-up onclick of an image

HTML

<!-- Trigger the Modal -->
<img id="myImg" src="https://i.stack.imgur.com/XWcU8.png" alt="Image" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

CSS:

/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

JS:

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

check working sample in JS FIDDLE here.

                        **OR**

You can probably use jQuery to show a zoomed image on hover.

HTML:

<img src="https://i.stack.imgur.com/XWcU8.png" width="250px" id="sidebar">

<div class="img"><img src="https://i.stack.imgur.com/XWcU8.png" width="400px" height="250px" id="img">
    </div>

JQUERY: (3.2.1 used in fiddle that you can find below)

$('#img').hide(); 
$('#sidebar').mouseover(function () {
      $('#img').show();      
});
$('#sidebar').mouseout(function () {
      $('#img').hide();      
});

Find a JS FIDDLE working sample here

How to Retrieve Images from MySQL Database and Display in an HTML Tag