Anyone know how to store image in mysql and display back using angular and php?

Question

I have created a web page to display image, topic and details. Just now i have a static html page this is just a page i have nothing implemented any thing.

<section class="section-02">
        <div class="container">
    <h3>
            <div class="heading-large">Current Best</div>
          </h3>
    <div class="row">
            <div class="col-md-4">
        <div class="card"> <img class="img-fluid" src="img/media-1.jpg" alt="">
                <div class="card-block">
            <div class="news-title"><a href="#">
              <h2 class=" title-small">An Alternative Form of Mental Health Care Gains a Foothold</h2>
              </a></div>
            <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
          </div>
              </div>
        <ul class="news-listing">
                <li><a href="#">Key Republicans sign letter warning against candidate</a></li>
                <li><a href="#">Obamacare Appears to Be Making People Healthier</a></li>
                <li><a href="#">Syria war: Why the battle for Aleppo matters</a></li>
                <li><a href="#">‘S.N.L.’ to Lose Two Longtime Cast Members</a></li>
              </ul>
      </div>
            <div class="col-md-4">
        <div class="card"> <img class="img-fluid" src="img/media-2.jpg" alt="">
                <div class="card-block">
            <div class="news-title"><a href="#">
              <h2 class=" title-small">Delta passengers got pizza delivered to the plane</h2>
              </a></div>
            <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
          </div>
              </div>
        <ul class="news-listing">
                <li><a href="#">Syria war: Why the battle for Aleppo matters</a></li>
                <li><a href="#">Key Republicans sign letter warning against candidate</a></li>
                <li><a href="#">Obamacare Appears to Be Making People Healthier</a></li>
                <li><a href="#">‘S.N.L.’ to Lose Two Longtime Cast Members</a></li>
              </ul>
      </div>
            <div class="col-md-4">
        <div class="card"> <img class="img-fluid" src="img/media-3.jpg" alt="">
                <div class="card-block">
            <div class="news-title"><a href="#">
              <h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
              </a></div>
            <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
          </div>
              </div>
        <ul class="news-listing">
                <li><a href="#">‘S.N.L.’ to Lose Two Longtime Cast Members</a></li>
                <li><a href="#">Key Republicans sign letter warning against candidate</a></li>
                <li><a href="#">Obamacare Appears to Be Making People Healthier</a></li>
                <li><a href="#">Syria war: Why the battle for Aleppo matters</a></li>
              </ul>
      </div>
          </div>
  </div>
      </section>

now i want to store this in mysql database using angular and php

Answer 1

Although it's technically possible to store an image in a BLOB type, I totally discourage you to do it and rather use a could-based filesystem such as S3 or the local filesystem of the server. Just store on the DB the URI of the image.

Storing BLOBS in the DB will make it slower, the backups will take much longer and the queries must be optimized to avoid retrieving the BLOB. A simple SELECT * FROM users; can kill your DB if you have thousands of users.