자바스크립트를 사용하여 이미지 존재 여부 확인_존재하지 않는 경우 기본 이미지 코드 표시

웹사이트나 애플리케이션에서 이미지를 표시해야 하는 경우가 있는데 이미지가 존재하는지, 서버에서 삭제되었는지 확실하지 않습니다. 이때, 이미지를 직접 표시하면 오류가 발생할 수 있습니다. 이 문제를 해결하기 위해 Javascript 코드를 사용하여 이미지가 있는지 확인하고, 이미지가 없으면 기본 이미지를 표시할 수 있습니다. 이 기사에서는 Javascript를 사용하여 이 기능을 구현하는 방법을 소개합니다.

먼저 표시할 이미지를 div 또는 img 태그로 래핑하고 태그에 src-real 사용자 정의 속성을 설정하여 이미지의 실제 경로를 저장해야 합니다. 코드는 다음과 같습니다:

<div class="image-container">
  <img class="image" src="" src-real="path/to/image.jpg">
</div>

다음으로 Javascript를 사용하여 이미지가 존재하는지 확인할 수 있습니다. Image 객체의 onload 및 onerror 이벤트를 사용하면 이미지 로딩이 완료되거나 실패할 때 해당 이벤트 처리 함수가 트리거될 수 있습니다. 이미지를 표시하기 위해 로딩 완료 이벤트 onload에서 이미지의 src 속성을 실제 경로 src-real로 설정할 수 있습니다. 표시된 것처럼 로딩 실패 이벤트 onerror에서 이미지의 src 속성을 기본 이미지의 경로로 설정할 수 있습니다. 아래:

// 获取所有要判断的图片节点
const images = document.querySelectorAll('.image')

// 循环遍历每个图片节点
images.forEach(image => {

  // 创建一个新的Image对象
  const img = new Image()

  // 加载完成，显示实际图片
  img.onload = () => {
    image.src = image.getAttribute('src-real')
  }

  // 加载失败，显示默认图片
  img.onerror = () => {
    image.src = 'path/to/default-image.jpg'
  }

  // 设置Image对象的src属性并加载图片
  img.src = image.getAttribute('src-real')
})

위 코드에서는 먼저 querySelectorAll 메소드를 통해 판단할 모든 이미지 노드를 획득하고 각 이미지 노드를 반복합니다. 그런 다음 새 Image 객체를 만들고 onload 및 onerror 이벤트 핸들러를 설정했습니다. 이미지가 로드되면 onload 이벤트가 트리거됩니다. getAttribute 메소드를 통해 이미지의 실제 경로 src-real을 가져오고 이미지가 표시될 때 이미지 노드의 src 속성에 경로를 할당할 수 있습니다. 로드에 실패하면 onerror 이벤트가 트리거되면 이미지 노드의 src 속성을 기본 이미지의 경로로 설정하여 기본 이미지를 표시할 수 있습니다.

마지막으로 이미지 로드에 실패했을 때 올바른 기본 이미지가 표시될 수 있도록 CSS에서 기본 이미지의 스타일을 설정해야 합니다. 코드는 다음과 같습니다.

.image {
  width: 300px;
  height: 200px;
  background-color: #ddd;
}

.image[src*="default"] {
  background-image: url('path/to/default-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

위 코드에서는 먼저 이미지의 너비, 높이, 배경색을 설정했습니다. 그런 다음 CSS 속성 선택기 [src*="default"]를 사용하여 src 속성에 "default"가 포함된 모든 이미지 노드를 선택한 다음 이미지 노드의 배경 이미지를 기본 이미지의 경로로 설정합니다. 기본 그림 효과를 표시합니다.

요약하자면, Javascript 코드를 사용하여 이미지가 있는지 확인하고, 이미지가 없으면 기본 이미지를 표시할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 이미지 로딩 실패로 인한 오류 상황을 줄일 수 있습니다.

위 내용은 자바스크립트를 사용하여 이미지 존재 여부 확인_존재하지 않는 경우 기본 이미지 코드 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!