상대 이미지가 손상되었으므로 자바 스크립트가 필요합니다.

여기에서 새로운 기능이 제공됩니다. 내 웹 사이트에서 소스 파일의 대부분에 액세스 할 수 없기 때문에 자바 스크립트로 페이지로드시 일부 깨진 이미지를 고치려고합니다. 나는이 깨진 이미지 중 하나에 대한 검사 요소를 사용하는 경우상대 이미지가 손상되었으므로 자바 스크립트가 필요합니다.

그것은 다음과 같이 보여줍니다

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

가

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

이 서로 다른 이미지의 무리, -82입니다해야 할 때. jpg, -2482.jpg, -3582.jpg

여기까지 제가 시도한 내용입니다. 이것은 작동하지만 페이지에 다른 자바 스크립트를 깰 몇 가지 이유로 보인다. 나는 또한 HTML을 연결하는 방법을 알아야하므로

HTML

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

내 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); 
}

파일 JavaScript가 페이지가로드 될 때로드되도록합니다. 고마워.

출처

2014-09-03 learningstuff

JQuery를 사용할 수 있습니까? –

@ Bonatoc 그런 작은 작업을 수행하기 위해 전체 라이브러리를로드하는 것이 좋습니다. – melancia

당신은 절대적으로 옳습니다. 늦었고 좀 게으른 느낌이 들었습니다. 그는 noobie이기 때문에 일부 JQuery도 배웠을 것입니다. 나는 요즘 순수한 자바 웹 애플리케이션에 기대고 있다고 동의한다. BTW 나는 아래 귀하의 답변에 투표. –

이 문제를 해결해야합니다

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

출처

2014-09-03 22:21:25 melancia

이것은 완벽하게 작동했습니다! 정말 고맙습니다. – learningstuff

모든 이미지를 포함하여 전체 페이지가로드 될 때 스크립트를 실행하려면 다음을 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload – melancia

표시됨 해결, 그리고 링크에 대한 감사합니다. 나는 이것을 달성하는 방법을 궁금해했습니다. – learningstuff

에 오신 것을 환영합니다 SO!

당신의 접근법에서의 문제는 몸의 순수 HTML을 변경하는 것이 결코 동적 인 페이지를위한 좋은 생각이 아닐 수 있다는 것입니다. 또한 자바 스크립트의 replace을 정규식없이 사용하면 문자열의 첫 번째 오 브런 스만 바꿉니다.

이제 요소의 속성을 변경해야 할 때 Javascript에는 DOM이라는 조작이 있습니다. 웹상에는 많은 자료와 튜토리얼이 있습니다. 당신은 그것을 조사해야합니다!

, 당신은 변수로 요소를 선택하고 속성을 조작하고 속성 때문에, 귀하의 경우가 될 수 있습니다

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; 
    } 
}

출처

2014-09-03 22:23:14 LcSalazar

방금 수표를 추가했습니다. 어쨌든'querySelector'를 사용하여 +1했습니다. – LcSalazar

같은 순간에 답변을 편집했기 때문에 의견을 삭제했습니다. :) – melancia

굉장하고, 설명과 혀를 링크 주셔서 감사합니다. – learningstuff

상대 이미지가 손상되었으므로 자바 스크립트가 필요합니다.

답변

관련 문제