Problema al recuperar imágenes en formulario con php y mysql

Mi problema es que no logro mostrar mis imágenes guardadas en mi bd mysql. Cuando creo un producto nuevo desde mi formulario la ruta de la imagen se guarda en la tabla producto en la columna imagen de tipo varchar(50) en donde guardo el url de la imagen donde la guardo por ejemplo el url de la imagen que guardo en mi bd es: foto_pro/Cable con 5 Vias para Alimentar 4 Camaras.PNG

Y todo bien, se almacena en mi bd la ruta y en la carpeta imagen se guarda la imagen que seleccione de mi pc. El problema es cuando la quiero mostrar en mi formulario donde están mi catalogo de productos. Ésta es mi tabla producto con el campo imagen de tipo varchar de 50 caracteres donde se guarda la url de las imagenes:

este es el input de typo file el cual recoge la imagen deseada desde mi fromulario:

<div class="file-field input-field">
                          <div class="btn">
                            <span>FOTO: </span>
                            <input type="file" name="fotoo" >
                          </div>
                          <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                          </div>
                        </div>

Envío la imagen desde un formulario con el metodo POST y la propiedad enctype="multipart/form-data":

<form enctype="multipart/form-data" action="ins_productos.php"  method="post"  autocomplete="off"  >

Y éste es mi codigo php el cual se encarga de recibir la imagen desde el formulario:

$extension = '';
$ruta ='foto_pro';
$archivo = $_FILES['fotoo']['tmp_name'];
$nombre_archivo = $_FILES['fotoo']['name'];
$info = pathinfo($nombre_archivo);

 if ($archivo != ''){

    $extension=$info['extension'];
    if ($extension == "jpg" || $extension== "JPG" || $extension== "PNG" || $extension =="png" ){

     move_uploaded_file($archivo,'foto_pro/'.$nombrePro.'.'.$extension);
      $ruta = $ruta."/".$nombrePro.".".$extension;

    }else{
        header('location:../extend/alerta.php?msj=el formato no es valido&c=us&p=in&t=error');
        exit;
   }


 }else {
   $ruta="foto_pro/sinFoto.png";
}

A continuación procedo a insertar en mi bd los datos del producto incluyendo la ruta de la imagen guardada con esta consulta:

$ins = $con->prepare("INSERT INTO producto VALUES(?,?,?,?,?,?,?,?,?)");
$ins->bind_param("isssdsssi",$cod_pro,$modelo,$nombrePro,$marcaPro,$precio,$descripcionPro,$garantia,$ruta,$categoPro);
if ($ins->execute()) {
  // code...
    header('location:../extend/alerta.php?msj=Producto Guardado&c=prod&p=altap&t=success');

}else {
  // code...

    header('location:../extend/alerta.php?msj=No se guardaron los datos del producto!&c=prod&p=in&t=error');


}

$con->close();
}else {//formulario
  header('location:../extend/alerta.php?msj=Utiliza el formulario&c=prod&p=in&t=error');
}

La carpeta donde guardo mis imagenes que es la url que guardo en mi bd, está en el mismo proyecto que es esta:

Y código de el formulario html donde muestro los datos de cada producto que tengo almacenados en mi bd es éste el campo en especifico de la imagen se llama imagen este es el código:

 <div class=" row">
                                         <?php  $sel=$con->prepare("SELECT*FROM Producto where cod_catego1 =3 ");
                                         $sel->execute();
                                         $res=$sel->get_result();
                                         $row=mysqli_num_rows($res);

                                         while($f=$res->fetch_assoc()){

                                            ?>
                                         <div class="card col s3 ">
                                             <form action="index.php?action=add&code=<?php echo $f["modelo"]; ?>" method="post" >
                                                 <div class="card-image">
                                                 <img src="<?php echo $f['imagen'] ?>" width="50" height="180">
                                                 <!-- <span class="card-title">Card Title</span> -->
                                                 </div>
                                                 <div class="card-content  purple-text">
                                                     <p><?php echo $f['nombrep'] ?></p>
                                                     <p><?php echo $f['modelo'] ?></p>
                                                 </div>
                                                 <!-- <div class="card-action"> -->
                                                     <input type="number"  value="1" name="quantity" min="1"  class=" col s6 blue-text " autocomplete="off">
                                                    <input type="hidden" name="hidden_name" value="<?php echo $f["nombrep"]; ?>" />
                                                    <input type="hidden" name="hidden_price" value="<?php echo $f["precio"]; ?>" />
                                                    <button class="btn btn-floating orange " type="submit" name="add_to_cart"><i class="material-icons right">add_shopping_cart</i></button>
                                                    <button data-target="modal1" data-id="<?php echo $f["cod_producto"]; ?>"  value="<?php echo $f["modelo"]; ?>"  class="btn modal-trigger ver"><i class="material-icons">visibility</i></button>

                                                     <div class="card-content">
                                                         <p class="red-text "><?php echo "$ ".number_format($f['precio'],2); ?></p>
                                                     </div>
                                                 </form>

                                             <!-- </div> -->

                                         </div>

                                         <!-- Modal Structure -->


                                         <?php

                                     }

                                     ?>

         </div><!-- fin de row container de pruductos-->

Y no se a que se debe que no muestre las imagenes, ya lo había hecho antes, es la primera vez que ya intenté de todo y nada así se ve mi formulario de mi catalogo de productos. Sólo muestra los datos de el precio del producto y la marca pero no la imagen: y si buscamos en la carpeta si están guardadas no se por que no las recupera y ya le he dado permisos de lectura y escritura al carpeta donde se guardan las imagenes y nada:
introducir la descripción de la imagen aquí

El dato curioso es que si cambio de lugar la carpeta no se que sucede, es que como que se resetea la dirección url de las imagenes y ya las muestra todas asi es como esta mi bd de los productos y la url de las imagenes para cada respectivo, en este lugar esta mi carpeta foto_pro antes de cambiarla de lugar

Y no me muestra los productos, así se ven el catalogo de productos sin mostrar las imágenes de cada producto antes de cambiarla de lugar la carpeta esta en: productos/foto_pro

Y mi bd apunta a esa carpeta en donde estan las fotos guardadas:

Ahora hago el cambio de lugar de la carpeta y la pongo en la carpeta ope , la direccion que daría asi: ope/foto_pro:

Y al refresacar mi página resulta que mi catálogo de productos ahora si muestra las imágenes de cada producto pero el error regresa, desaparecen después de un tiempo las imágenes ejemplo cierro la aplicacion y al otro día tengo que hacer lo mismo, cambiar de directorio la carpeta foto_pro no se a qué se deba :

es un error muy raro siento no se si a alguien ya le paso antes, espero me puedan ayudar saludos. y muchas gracia por leer mi publicación que no es nada pequeña saludos.