Quiero hacer un botón que simplemente cambie el src de la foto del src dado de la imagen
<div id="main_photo"> <img class="card-img-top" src="/img/new0.JPG" alt="Avatar" > </div>Tengo una foto new1.JPG a new6.JPG que debe cambiarse en esta fuente de imagen al hacer clic en un botón Todas las fotos están en mi carpeta /img/ Y aquí está mi código HTML para que el botón cambie src con un clic.
<button id="changeimg" > Change </button>Como dijo @Teemu (en los comentarios), si tiene la lista de las nuevas imágenes a las que desea cambiar, puede hacerlo mediante el código js.
<div id="main_photo"> <img class="card-img-top" id="mainImage" src="/img/new0.JPG" alt="Avatar" > </div> <button id="changeimg" onclick="changeImage()"> Change </button> <script> var imageIndex = 0; var imageCount = 6; // Can be also an array of images names ["/img/new0.JPG", "/img/new1.JPG", ..., "/img/new6.JPG"] function changeImage() { var imageContainer = window.getElementById("mainImage"); imageContainer.src = "/img/new" + (imageIndex++) + ".JPG"; // Make sure you validate the counter so it won't overflow } </script>Tengo una demostración para ti si tienes la lista de imágenes. Y creo que puede tener eso con un código simple para obtener todas las imágenes en su carpeta local.
const listSources = [ '/img/new0.JPG', '/img/new1.JPG', '/img/new2.JPG', '/img/new3.JPG', '/img/new4.JPG', '/img/new5.JPG', '/img/new6.JPG', ] var currentIndex = 0; $('#changeimg').click(function() { // increase index to show the next image currentIndex++; // reset if reach the last image if (currentIndex == listSources.length) currentIndex = 0; // set image src $('#main_photo>img').first() .attr('src', listSources[currentIndex]) .attr('alt', listSources[currentIndex]); // change alt to show changes in demo }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="changeimg">Change</button> <div id="main_photo"> <img class="card-img-top" src="/img/new0.JPG" alt="/img/new0.JPG"> </div>