잡히지 않은 TypeError : null의 'src'속성을 설정할 수 없습니다. 이미지 갤러리

내 "새내기"에 대해 용서해주십시오, 나는 거래했을 때의 코더가 아니며 단지 코디도 아닙니다.잡히지 않은 TypeError : null의 'src'속성을 설정할 수 없습니다. 이미지 갤러리

그렇다면 웹 기반 네트워크 모니터링 도구 (SolarWinds NPM)에서 이미지 갤러리를 만들어 우리 사이트의 장비 사진을 볼 수 있습니다. 기본적으로 iframe 인 "사용자 지정 HTML 리소스"에서이 작업을 수행합니다.

갤러리는 부모 페이지의 제목을 변수로 사용하여 웹 서버에서 이미지를 찾을 폴더를 결정해야합니다.

다음을 실행하려고하면 Chrome 콘솔에 "Uncaught TypeError : 자바 스크립트의 2 행에 null의 src '속성을 설정할 수 없습니다."라는 오류가 발생합니다.

HTML : 여기

<html> 
<head> 
<style> 
div.img { 
    margin: 5px; 
    border: 1px solid #ccc; 
    float: left; 
    width: 180px; 
} 

div.img:hover { 
    border: 1px solid #777; 
} 

div.img img { 
    width: 100%; 
    height: auto; 
} 

div.desc { 
    padding: 15px; 
    text-align: center; 
} 

.responsive { 
    padding: 0 6px; 
    float: left; 
    width: 24.99999%; 
} 

@media only screen and (max-width: 700px){ 
    .responsive { 
     width: 49.99999%; 
     margin: 6px 0; 
    } 
} 

@media only screen and (max-width: 500px){ 
    .responsive { 
     width: 100%; 
    } 
} 
</style> 
</head> 
<body> 
<div class="img"> 
    <a target="_blank" href=""> 
    <img id="Image1" src="image1.png" width="300" height="200"> 
    </a> 
</div> 

<div class="img"> 
    <a target="_blank" href=""> 
    <img id="Image2" src="image2.png" width="300" height="200"> 
    </a> 
</div> 

<div class="img"> 
    <a target="_blank" href=""> 
    <img id="Image3" src="image3.png" id="Image3" width="300" height="200"> 
    </a> 
</div> 

<div class="img"> 
    <a target="_blank" href=""> 
    <img id="Image4" src="image4.png" width="300" height="200"> 
    </a> 
</div> 
<script src="SiteDBpics\Gallery.js"></script> 
</body> 
</html>

그리고 자바 스크립트입니다 :

var title = window.parent.document.getElementsByTagName("title")[0].innerHTML; 
document.getElementById("Image1").src = "SiteDBpics/" + title + "/image1.png"; 
document.getElementById("Image2").src = "SiteDBpics/" + title + "/image2.png"; 
document.getElementById("Image3").src = "SiteDBpics/" + title + "/image3.png"; 
document.getElementById("Image4").src = "SiteDBpics/" + title + "/image4.png";

어떤 도움을 주시면 감사하겠습니다!

EDIT1 : HTML이 "A. Wolff"의 제안을 반영하도록 변경되었습니다.

EDIT2 : 문제점을 발견했습니다! 일부 서식 오류가있어서 이미지 URL을 선언 할 때 HTML 부분에 일부 인용 부호가 깜박입니다. 또한 스크립트의 파일 경로 세부 정보도 변경해야했습니다.

출처

2016-09-02 RedStarFire

DOM에 요소가 설정되기 전에 스크립트를 호출하기 때문에 그 이유는 ''하나를 닫기 직전에 스크립트 태그를 포함하는 것입니다. –

예, "document.getElementsByTagName ('title') [0] –

변경 사항과 동일한 오류가 계속 발생합니다. – RedStarFire

당신은 떨어져 당신의 DOM 생성을 던지고 라인 47 "= 대상 = _blank href를 두 번 견적을 폐쇄, 두 번째 누락하고 있습니다. 또한

, 당신은에 제목 태그가 없습니다 당신의

출처

2016-09-02 16:17:25

감사합니다. 인용 오류가 발생하여 누락 된 인용구를 발견했습니다. 제목은 여기에 표시되지 않는 상위 HTML에 정의되어 있습니다. – RedStarFire

@RedStarFire 제발 upvote 귀하의 문제에 대한 해결책으로 내 대답을 받아들입니다. 이것이 스택 오버 플로우가 작동하는 방식입니다. :-) –

나는 upvote하려고했지만, 충분한 담당자가 없어 ( – RedStarFire

잡히지 않은 TypeError : null의 'src'속성을 설정할 수 없습니다. 이미지 갤러리

답변

관련 문제