이미지가 외부 URL에서로드되는지 여부를 기반으로하는 문인 경우

Question

질문을 표현하는 데 어려움을 겪고 있습니다. 이미 Stackoverflow에 대한 답변이있을 수 있지만 이미지 링크를 제공하는 API로 작업하고 있습니다. JSON 파일의 다른 데이터와 함께 외부 URL 불행히도 일부 링크가 더 이상 작동하지 않습니다.

제 목표는 if 문에서이를 확인하고 이미지가로드되지 않으면 다른 데이터도로드하지 말아야한다는 것입니다.

는 여기에 내가 시도 코드,하지만 불행히도, 일부 항목은 아직 통해 점점 :

{% for i in range(cards[setName]|length) %} 
    {% if cards[setName][i]['img'] %} 
     <p>{{ cards[setName][i]['name'] }}</p> 
     <a href="{{ cards[setName][i]['img'] }}"> 
      <img src="{{ cards[setName][i]['img'] }}"> 
     </a> 
    {% endif %} 
{% endfor %} 

Answer 1

여기에 최소한의 예가 나와 있습니다. 필요에 따라 수정하십시오. 이미지가로드되지 않으면 img의 부모 div가 숨겨집니다. 사업부가 액세스 할 수 IMG의 웅대 한 부모가 아닌 부모 인 경우

<div> <!-- this div contains the image and other data --> 

    <img src="path/to/image.jpg" onError="this.onerror = '';this.parentElement.style.display='none';"> 

    <!-- ... other data ... --> 
</div> 

는 사용

this.parentElement.parentElement 

Answer 2

신사 링크가 작동되지 않거나이 알고하지 않습니다. 그냥 문자열을 가져옵니다. 따라서 API 나 API에서 JSON을 전송하기 전에이 검사를 수행하거나 주석에서 제안 된 javascript 솔루션을 사용하여 실패한 이미지를 숨길 수 있습니다.

json을 보내기 전에 '확인'을하는 것은 나쁜 생각입니다. 각 URL을 확인하라는 요청을 많이 할 것이기 때문입니다. 비동기 작업을 사용하여 데이터베이스의 이미지를 확인하는 것이 가장 좋습니다.

왜 범위 내에서 i를 사용합니까? 이렇게하면 가독성이 향상됩니다.

{% for card in cards[setName] %} 
    {% if card['img'] %} 
     <p>{{ card['name'] }}</p> 
     <a href="{{ card['img'] }}"> 
      <img src="{{ card['img'] }}"> 
     </a> 
    {% endif %} 
{% endfor %}