Как сделать изображения на сайте редактируемыми

Question

У меня есть небольшие сайты с хорошим количеством изображений. Проблема в том, что все изображения меняются со временем. Например, у меня есть изображение предложения. Это изображение может измениться на другое, поэтому мне нужно изменить изображение.

Я хотел бы хранить все изображения в каталоге и путь к изображениям в базе данных. Я добавлю кнопку редактирования рядом с каждым изображением, когда пользователь щелкнет по нему, я хотел бы передать некоторые параметры, такие как src, и иметь функцию, позволяющую мне изменить любое изображение на веб-сайте на что угодно.

Я думаю, у меня есть способ, но мне нужна помощь при запуске. Я создал таблицу изображений и добавил изображения. Как я могу написать функцию, которая в основном позволит мне изменить любое изображение сайта на другое изображение из базы данных.

РЕДАКТИРОВАТЬ 1 Вот код, который я сделал. В основном, когда пользователь щелкает по изображению редактирования, открывается модальное окно, в котором есть все изображения из базы данных. Когда пользователь выбирает изображение, оно заменяет атрибут src кликаемого изображения. Но когда я обновляю страницу, изображение возвращается к исходному изображению.

HTML

<div class="container">
 <img alt="Start timer" id="idimg2" class="classimg" src="css/icons/timer-stop.png">
  <div class="overlay"> 
        <button type="button" class="btn btn-warning img-upload" data-toggle="modal" data-target="#modal" imgid= "idimg2" imgclass="classimg" >
  Edit
</button></div>
</div>




<!--  Timer reason modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"> 
        <h3 class="modal-title" id="lineModalLabel">A&G Signs - SCS</h3>
        <div class="text-center">
                    <h4>Select Image</h4>
                     <form id="timer-reason">
                        <div class="row">
                                <div class="col-md-12">
                                    <?php
                                        while ($row = mysqli_fetch_assoc($images)) {
                                    ?>
                                            <img src="<?php echo $row['imagedir_img']; echo $row['image_img']; ?>" style="width:20%;" class="img-gallary">

                                    <?php 
                                     }
                                    ?>

                                 </div>
                                </div>
        </div>
      </div>
                <div class="modal-footer">
                    <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-success" id="submit-timer-reason" role="button" data-dismiss="modal">Save</button>
                        </div>
                    </div>
                </div>
      </form>
    </div>
  </div>
</div>

JavaScript

$( document ).ready(function() {
$(".img-upload").click(function(){
     imdid = $(this).attr("imgid");
});

$(".img-gallary").click(function(){
    var imgsrc = $(this).attr("src");
    $("#"+ imdid).attr("src",imgsrc)

   });  

  });

Большое спасибо.