1

Actualmente muestro mis imágenes en una lista poniendo el source de cada una, pero ya son demasiadas y quiero mandar a traer mis imágenes desde una carpeta externa para evitar poner el source de cada una de ellas.
Alguien me podría dar una idea para solo mandar a traer la carpeta y se puedan mostrar automáticamente dichas imágenes?
Gracias.

<HTML> 
<HEAD> 
<TITLE>mi ejemplo</TITLE> 
</HEAD> 
<BODY> 

<H1>Catálogo</H1> 
<br>
<br>
<div id="Mosaico">    

   <IMG SRC="/graficos/Image1.png" WIDTH=140 HEIGHT=210 ALT="Producto1">    

   <IMG SRC="/graficos/Image2.png" WIDTH=140 HEIGHT=210  ALT="Producto2">  

   ...   

   <IMG SRC="/graficos/Image70.png" WIDTH=140 HEIGHT=210 ALT="Producto70"> 
</div>
</BODY> 
</HTML> 
3
  • Para poder encontrar la ayuda que necesitas, es necesario que compartas el codigo que estas usando para hacer el llamado de las rutas de las imagenes y de igual forma la estructura de carpetas que estas usando. Commented el 6 jun. 2017 a las 16:02
  • si disculpen por no poner un ejemplo al instante.
    – BrandCodes
    Commented el 6 jun. 2017 a las 20:59
  • Necesitas alguna tecnología del lado del servidor... y opciones hay muchas, depende de tu competencia y presupuesto. Busca PHP, Python, Ruby, Java, Node, Go, Swift, y un largo etcétera.
    – toledano
    Commented el 7 jun. 2017 a las 2:05

3 respuestas 3

4

Desde el cliente no puedes saber las imagenes que hay dentro de una carpeta, a menos que el servidor use un api para exportar la ruta de las imagenes o usar un motor de plantillas (template engine) para generar html desde otro codigo como jade o ejs.

Lo que puedes hacer para no repetir tanto el codigo es usar javascript para cargar las imagenes, pero de todas formas tienes que especificar cual es la ruta para las imagenes

var carpeta = "/myfolder";
var images = ["img1.jpg", "img2.jpg"];
images.forEach(function(img) {
  var image = new Image();
  image.src = carpeta + "/" + img;
  image.onerror = error;
});

function error(e) {
  console.log(e)
}

corriendo el script en stackoverflow logicamente da error, pero se puede ver en los logs que hace las llamadas al servidor correctas

1
  • MUchas gracias, lo adaptaré para probarlo.
    – BrandCodes
    Commented el 6 jun. 2017 a las 21:00
0

Dado que no hay mucha información, te brindo un ejemplo que tal vez te pueda servir para las imágenes.

Con este ejemplo, lo que haces es ir cargando las imágenes en la carpeta que elijas. Tal vez te sirva.

   <script>
    var imagen=1;
    while(error==false)
{
       var carpeta= obtener_imagen("carpeta");
       var img= new Image();
       img.src=""+carpeta+"/"+imagen+".jpg";
       img.onerror=error(imagen);
       imagen++;
}

         function error(numero)
         {
           error=yes;
           total=numero
         }
</script>
1
  • el codigo tiene problema, img.onerror=error(image), lo que se le pasa a img.onerror es una funcion, y no lo estas haciendo, img.onerror esta recibiendo undefined Commented el 6 jun. 2017 a las 17:10
-1

Normalmente debes tener un "Servidor de imágenes" o repositorio de imagenes, que no es mas que otro sitio, subdominio o incluso servicios de almacenamiento donde específicamente colocas imágenes. Por ejemplo facebook hace uso de CDN https://scontent-dft4-1.xx.fbcdn.net/ para guardar las imagenes; tambien existe Azure Blob Storage de Microsoft, para almacenar archivos, etc. pero algo tan simple como un sitio alterno te sirve.

Por ejemplo tienes:

<img src="/graficos/Image1.png" width=140 height=210 alt="Producto1">

Con un sitio especifico para imagenes quedaria

<img src="http://locahost:88/graficos/Image1.png" width=140 height=210 alt="Producto1">

Donde el http://locahost:88/ lo sustituyes por la URL de tu sitio o repositorio, y este debe tener tu estructura requerida.

PD. La notación html debe estar en minúsculas por convención, las etiquetas debe ser <img en vez de <IMG.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.