Nuevo aquí. No tengo acceso a la mayoría de los archivos fuente en mi sitio web, así que estoy tratando de arreglar algunas imágenes rotas en la carga de la página con javascript.

Cuando uso el elemento de inspección para una de estas imágenes rotas, se muestra así:

<img src="-82.jpg" width="60px">

Cuando ellas deberían estar

<img src="http://example.com/files/images/-82.jpg" width="60px">

Esto es para un montón de imágenes diferentes, -82.jpg, -2482.jpg, -3582.jpg

Esto es lo que he intentado hasta ahora. Esto parece funcionar, pero por alguna razón rompe otros javascript en la página.


html

<script type="text/javascript" src="http://example.com/files/js/fiximages.js"></script>
<body onload="fixImages();">

mi archivo fiximages.js

function fixImages() {
    var toReplace = '<img src="-';
    var replaceWith ='<img src="http://www.example.com/files/images/-';
    document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}

Soy un poco novato, así que también necesito saber cómo vincular el html al javascript para que se cargue cuando se carga la página. Gracias chicos.

2
learningstuff 4 sep. 2014 a las 02:14

2 respuestas

La mejor respuesta

Esto debería resolver su problema:

function fixImages() {
    // Create a list of all img which src starts with "-".
    var imgs = document.querySelectorAll('img[src^="-"]');

    // Loop through this list.
    for (var i = 0; i < imgs.length; i++) {
        // For each img, replace its src with the correct path + the
        // src that's already there.
        imgs[i].setAttribute('src', 'http://www.example.com/files/images/' + imgs[i].getAttribute('src'));
    }
}

Demo

5
melancia 3 sep. 2014 a las 22:21

Bienvenido a SO!

El problema en su enfoque es que cambiar el HTML puro del cuerpo nunca es una buena idea para una página dinámica. Además, replace de JavaScript, cuando se usa sin una expresión regular, reemplazará solo la primera aparición de la cadena.

Ahora, cuando necesita cambiar el atributo de un elemento, Javascript tiene una manipulación llamada DOM. Hay mucho material y tutoriales en la web ... ¡Debes investigarlo!

Con DOM, puede seleccionar un elemento como variable y manipular sus propiedades y atributos, por lo que, en su caso, sería:

function fixImages() {
    var imgs = document.getElementsByTagName("img");
    for(var i=0; i<imgs.length; i++) {
        if(imgs[i].src.indexOf("-") == 0)
            imgs[i].src = "http://www.example.com/files/images/" + imgs[i].src;
    }
}
0
LcSalazar 3 sep. 2014 a las 22:23