Quería leer todas las imágenes de la carpeta y mostrarlas dinámicamente en la página html agregando los nombres de las imágenes en el panel del lado izquierdo. Una vez que haga clic en el nombre de la imagen, debería mostrar la imagen en el panel lateral derecho.
Intenté como se muestra a continuación, pero no muestra las imágenes una vez que hice clic en el botón Mostrar.
<!doctype html> <html lang="en"> <head> <script type = "text/javascript"> function myfunction() { var folder = "images/"; $.ajax({ url : folder, success: function (data) { $(data).find("a").attr("href", function (i, val) { if( val.match(/\.(jpe?g|png|gif)$/) ) { $("body").append( "<img src='"+ folder + val +"'>" ); } }); } }); } </script> <meta charset="utf-8"> <title>Sequence Diagram</title> <link rel="stylesheet" type="text/css" href="assets/3rdparty/markdown.css"> <link rel="stylesheet" type="text/css" href="assets/custom.css"> </head> <body> <div id="placeholder"></div> <div id="content"> <input type = "button" onclick = "myfunction()" value = "Display"> </div><!--End of content--> <script src="assets/3rdparty/marked.js"></script> <script src="assets/custom.js"></script> </body> </html>¿Alguien puede sugerir cómo hacer esto de forma dinámica para todas las imágenes en una carpeta?
Gracias...
Actualmente no existe ningún método para lograr esto; debes usar otros lenguajes de programación como javascript y otros... Si vas a utilizar javascript, prefiero ReactJS o NextJS...
HTML es solo un lenguaje de marcado web y no puede realizar lo que está solicitando en este momento. No estoy seguro de cómo describirlo todo, pero espero que entiendas la idea.