¿Hay alguna forma de usar jQuery para cambiar una parte de la URL de origen de una imagen?
Estoy trabajando en una página que tiene varios elementos de imagen que se generan mediante programación (pero no puedo acceder al código fuente que los genera). Y todos comparten la misma clase.
Digamos que tengo el siguiente HTML:
<img src="https://cdn.example.com/pictures/01.jpg" class="photo"> <img src="https://cdn.example.com/pictures/02.jpg" class="photo"> <img src="https://cdn.example.com/pictures/03.jpg" class="photo"> <img src="https://cdn.example.com/pictures/04.jpg" class="photo">Suficientemente simple. Pero ahora, ¿qué pasa si quiero apuntarlos a todos a un directorio diferente? Me gusta: /imágenes/
Hasta ahora, he probado algunas cosas, incluido este fragmento de jQuery, pero hasta ahora nada ha funcionado:
$("img.photo").attr("src").replace("pictures","images");Eso parece que debería hacerlo porque apunta a imágenes con esa clase -> luego el atributo "src" -> y le dice que reemplace "imágenes" con "imágenes".
Pero soy extremadamente nuevo en el uso de jQuery, por lo que agradecería un poco de ayuda.
¿Que me estoy perdiendo aqui? ¿Algún consejo?
ACTUALIZACIÓN: Muchas gracias a quienes brindaron respuestas y explicaciones. ¡Realmente aprecio que ayuden a un principiante!
En su código, simplemente cambie la cadena devuelta de $("img.photo").attr("src") sin hacer nada después. Esto no cambiará el atributo en sus elementos <img> .
Esto debería hacer el trabajo:
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")}) Aquí reviso todos los elementos coincidentes y asigno la cadena src modificada de nuevo al atributo src de cada elemento.
$("img.photo").each(function(){this.src=this.src.replace("pictures","images")}); // list the changed src values in the console: console.log($("img.photo").map((i,img)=>img.src).get()) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://cdn.example.com/pictures/01.jpg" class="photo"> <img src="https://cdn.example.com/pictures/02.jpg" class="photo"> <img src="https://cdn.example.com/pictures/03.jpg" class="photo"> <img src="https://cdn.example.com/pictures/04.jpg" class="photo">Su fragmento de código no funcionará, porque toma el atributo src de la primera imagen y lo cambia, pero nunca establece el resultado como el nuevo src en los elementos <img> .
Prueba esto
$("img.photo").each((index, img) => { img.src = img.src.replace("pictures","images"); });