Llamar a imagenes en carpetas y subcarpetas con HTML y PHP

A veces, tenemos un esquema dentro de nuestra web de ésta manera:

Raiz :
  - index.html
  - Imagenes  - Carpeta 1
       -- Subcarpeta 1
            -- index.php
            -- Subcarpeta 1-2
  -- Carpeta 2
       -- Subcarpeta 2

---
A veces, estamos editando un código en html o php, donde necesitamos insertar una imagen. En el caso que la imagen esté en la misma carpeta que el documento que estamos programando, usaremos éste codigo:

<img src="imagen.jpg">

---

Si nuestra imagen está en otra carpeta, por ejemplo la imagen está en la carpeta llamada "Imagenes" y nosotros estamos trabajando en el documento "index.html" que está en la carpeta raíz, para llamar a ésta imagen usaremos el codigo :

<img src="Imagenes/imagen.jpg"> 

Sigamos con más ejemplos, si estamos trabajando en "index.php" y queremos insertar una imagen que está en "Subcarpeta 1-2" usaremos el mismo codigo anterior, ya que ese codigo funciona para llamar a una imagen de la carpeta superior, sin importar si estás o no trabajando en la carpeta raiz, asi estemos dentro de 10 subcarpetas, siempre usaremos el mismo para llamar a una imagen de la carpeta superior.

<img src="Subcarpeta 1-2/imagen.jpg"> 

---
En caso de que queramos una imagen que está a 2 carpetas superiores, es decir, si estamos en "index.html" y queremos llamar a una imagen que está en "Carpeta 1 / Subcarpeta 1" haremos ésto:

<img src="Carpeta 1/Subcarpeta 1/imagen.jpg"> 

Hacia carpetas superiores lo usaremos de esa forma infinitamente, solo hay que poner el nombre de las subcarpetas correspondientes según sea el caso.

---
Carpetas Inferiores


Cuando es el turno de llamar imagenes de carpetas inferiores, por ejemplo, editando "index.php" que segun la estructura de arriba, está dentro de "Subcarpeta 1", queremos llamar a una imagen que está dentro de "Carpeta 2" usaremos dos puntos ".." antes de la diagonal, de ésta manera le indicamos a nuestro navegador que la imagen está una carpeta más abajo, ejemplo:

<img src="../Carpeta 2/imagen.jpg"> 

Lo que hacen los dos puntos, es ordenar que el navegador busque la imagen "más atrás" de donde tenemos el documento que esta abierto.

Con el uso de éstos puntos, no es necesario escribir el nombre de las carpetas, con los dos puntos indicamos la orden. Así mismo funciona para ir hacia atrás cuantas veces queramos, ordenando en nuestro código ir a donde está la imagen, un ejemplo más largo es estar dentro de "Subcarpeta 1-2", para tomar una imagen que está en nuestra carpeta "Imagenes", el código sería éste:

<img src="../../../Imagenes/imagen.jpg"> 

Los primeros dos puntos, indican que regresamos a la carpeta "Subcarpeta 1", los siguientes dos puntos le indican que llegamos a "Carpeta 1", y los ultimos dos puntos nos ponen en la carpeta raiz, para terminar la indicacion de ir a la carpeta superior de donde estamos, con el nombre de "Imagenes".

---
Desde la raiz

A veces, como en el ultimo ejemplo, ir hacia atrás es demasiado tedioso, por lo cuál puede funcionar mejor el punto, que indica al navegador partir desde la carpeta raiz en lugar de estar dando seguimiento de esta forma "../../../../". En lo personal, recomiendo usar los dos puntos, cuando vayamos hacia atrás en una carpeta, tal vez dos, segun sea el caso en ocasiones nos conviene usar los dos puntos y otras veces no.

Para ésto, usemos el punto y diagonal que nos devuelve a la raiz " ./ ", éste es el modo de ir directamente a la carpeta raiz de nuestro dominio.

Así que, retomando el ejemplo anterior, colocándonos en "Subcarpeta 1-2" y queriendo insertar una imagen de la carpeta "Imagenes", usaremos ésto:


<img src="./Imagenes/imagen.jpg"> 

Que viene siendo lo mismo que ésto:

<img src="../../../Imagenes/imagen.jpg"> 


Hay que saber usarlas, pues como lo decía antes, a veces nos convendrá usar los dos puntos, y otras partir desde la raiz con el punto y diagonal.

Hay muchas maneras de usarlos, ya que no solo te devuelve a la carpeta raiz, si no que de ahí puedes partir para otras ubicaciones superiores, un ejemplo es:


<img src="./Carpeta 2/Subcarpeta 2/imagen.jpg"> 


---
Con PHP

Dentro de PHP, las indicaciones funcionan exactamente igual, pero si tratamos de insertar una imagen, tenemos que usar a funcion "echo" para agregarlo, como ya es común:

echo '<img src="imagen.jpg">';


...
Hasta la próxima!