Para servir archivos desde una carpeta que no está accesible desde afuera (por fuera del public_html
) una forma de hacerlo es "virtualizar" una carpeta, los archivos que se piden dentro de esa carpeta se filtran/validan y se leen del disco enviándose al navegador como si fueras el servidor.
Para este ejemplo usamos .htaccess
en servidor linux/apache, si necesitas para nginx
te lo armo.
Estructura de carpetas:
mvc/
├── app
│ ├── cache
│ ├── controllers
│ ├── models
│ ├── uploads
│ │ ├── 404.png
│ │ ├── eye-1.png
│ │ └── eye-3.png
│ └── views
├── public
│ ├── css
│ ├── img
│ │ └── logo.jpg
│ ├── .htaccess
│ ├── index.php
│ └── viewimages.php
└── sys
└── core.php
Aquí public
es la carpeta public_html
o sea el /
desde el navegador
.htaccess
RewriteEngine On
# sólo servimos imágenes desde uploads
RewriteRule images/(.*).bmp$ viewimages.php [NC]
RewriteRule images/(.*).gif$ viewimages.php [NC]
RewriteRule images/(.*).jpg$ viewimages.php [NC]
RewriteRule images/(.*).jpeg$ viewimages.php [NC]
RewriteRule images/(.*).png$ viewimages.php [NC]
# descomentar para permitir todos los archivos
# RewriteRule images/(.*)$ viewimages.php [NC]
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Imágenes desde otra carpeta</title>
<style>
body {
background: #FAFAFA;
}
h1 {
display: block;
width: 360px;
height: 220px;
background-image: url('img/logo.jpg');
background-size: cover;
text-indent: -999px;
}
.ojo3 {
background: url('images/eye-3.png') center center no-repeat #fff;
margin:10px;
padding:5px;
width: 200px;
height: 200px;
border-radius: 20px;
border:1px dashed red;
}
</style>
</head>
<body>
<h1>LOGO</h1>
<p>una imagen de un ojo <img src="images/eye-1.png" /></p>
<div class="ojo3">
<p>un div con otro ojo de fondo</p>
</div>
<p>una imagen que no se encuentra <img src="images/cualquiera.png" /></p>
<p>una imagen con extensión no válida <img src="images/index.php" /></p>
<p>una imagen que trata de leer el cache subiendo una carpeta <img src="images/../cache/foto.png" /></p>
</body>
</html>
En este index.php
que bien podría ser un .html
fijate cómo el logo se carga desde la carpeta img/logo.jpg
que sí existe y de eso se encarga apache, el resto de imágenes se cargan desde la "carpeta virtual" images/
. En un div cargo una imagen por CSS
en otro lado cargo la imagen en un IMG
tag.
viewimages.php
<?php
// definimos desde donde estamos hacia donde está la carpeta real
$IMAGESPATH = __DIR__.'/../app/uploads/';
// traemos el nombre de archivo pedido desde la redirección del apache
$filepath = $_SERVER['REQUEST_URI'];
$path_parts = pathinfo($filepath);
// extraemos sólo nombre y extensión y le adjuntamos la carpeta real
$fileImagepath = $IMAGESPATH.$path_parts['basename'];
// estaslíneas las descomentas para ver cómo es la magia
/*
var_dump($filepath, $fileImagepath, pathinfo($filepath));
die();
//*/
// si el archivo en la carpeta real existe
if (file_exists($fileImagepath))
{
// modificamos la fecha de acceso (unix)
touch($fileImagepath,filemtime($fileImagepath),time());
// vemos que cabecera enviar según la extensión
switch(strtolower($path_parts['extension']))
{
case "gif":
header("Content-type: image/gif");
break;
case "jpg":
case "jpeg":
header("Content-type: image/jpeg");
break;
case "png":
header("Content-type: image/png");
break;
case "bmp":
header("Content-type: image/bmp");
break;
}
// enviamos las cabeceras con cuanto pesa y cuando fue modificado
// para manejar cabeceras de "última vez modificado" que
// puede haber pedido el navegador ver las referencias
header("Accept-Ranges: bytes");
header('Content-Length: ' . filesize($fileImagepath));
header("Last-Modified: ".gmdate('D, d M Y H:i:s T', filemtime($fileImagepath)));
readfile($fileImagepath);
}
else
{
// si el archivo no existe o no reconocemos la extensión
// enviamos una imagen default 404 con su cabecera de error
header( "HTTP/1.0 404 Not Found");
header("Content-type: image/png");
header('Content-Length: ' . filesize($IMAGESPATH."404.png"));
header("Accept-Ranges: bytes");
header("Last-Modified: ".gmdate('D, d M Y H:i:s T'));
readfile($IMAGESPATH."404.png");
}
/*
Based on Script
By Samer Mhana
www.dorar-aliraq.net
*/
?>
Referencias:
script en el cual se basa el ejemplo
https://stackoverflow.com/a/9453207/1423096
apache modrewrite
https://httpd.apache.org/docs/2.4/rewrite/remapping.html
fechas en headers
https://stackoverflow.com/q/21120882/1423096
304 Not Modified
https://stackoverflow.com/q/10847157/1423096
de yapa la misma técnica para NodeJS : ¿Cómo puedo gestionar un grupo de imágenes en el servidor?