로컬 이미지 자바스크립트를 삭제하는 방법

웹사이트나 애플리케이션에서 로컬 이미지를 사용할 때 특정 이미지를 제거해야 하는 경우가 있습니다. JavaScript에는 로컬 이미지를 삭제하는 방법이 여러 가지 있습니다. 이 기사에서는 JavaScript를 사용하여 로컬 이미지를 삭제하는 방법을 자세히 설명합니다.

방법 1: URL.revokeObjectURL() 사용

JavaScript에서 URL.createObjectURL()을 사용하여 로컬 이미지를 로드하는 URL 개체를 만듭니다. URL 객체는 기본적으로 페이지에 이미지를 표시하기 위해 생성되므로 이미지를 더 이상 표시할 필요가 없으면 URL.revokeObjectURL() 메서드를 사용하여 이미지를 삭제할 수 있습니다.

다음은 URL.createObjectURL()을 사용하여 로컬 이미지를 로드하는 샘플 코드입니다.

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    const blobUrl = URL.createObjectURL(file);
    imgPreview.src = blobUrl;
  }
});

위 코드에서 사용자가 파일을 선택하고 업로드하면 파일의 URL을 blobUrl 변수에 저장합니다. 그런 다음 blobUrl을 imgPreview 요소의 이미지 소스로 설정합니다.

로드된 이미지를 삭제하려면 간단히 URL.revokeObjectURL() 메서드를 호출하세요.

URL.revokeObjectURL(blobUrl);
imgPreview.src = '';

위 코드 조각에서는 먼저 URL.revokeObjectURL() 메서드를 호출하여 이전에 저장된 blobUrl 변수와 비교합니다. 함께 지나갔습니다. 그러면 생성된 URL 개체가 즉시 삭제됩니다. 그런 다음 imgPreview 요소의 src 속성을 빈 문자열로 설정하여 이미지를 지웁니다.

방법 2: URL.createObjectURL()과 URL.revokeObjectURL()의 조합 사용

약간 다른 방법을 사용하면 웹사이트에서 이미지를 완전히 제거할 수 있습니다. 아래 코드 조각에서 이에 대해 자세히 설명합니다.

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");
let blobUrl;

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    blobUrl = URL.createObjectURL(file);
    if (imgPreview.src) {
      URL.revokeObjectURL(imgPreview.src);
    }
    imgPreview.src = blobUrl;
  }
});

위 코드에서는 이전과 동일한 방법을 사용하여 blobUrl 변수에 파일의 URL을 저장하고 imgPreview 요소에 이미지 소스로 설정합니다. 그러나 우리는 또 다른 추가 단계를 추가했습니다.

imgPreview 요소에 새 이미지 소스를 추가하기 전에 이미지 소스가 imgPreview 요소에 이미 존재하는지 확인합니다. imgPreview 요소에 이미 이미지 소스가 있는 경우 URL.revokeObjectURL() 메서드를 호출하여 먼저 이를 제거해야 합니다. 왜냐하면 브라우저는 src 속성을 다시 정의하기 전에 이전 URL을 자동으로 지우지 않기 때문입니다.

이 결합된 방법에서는 아래와 같이 blobUrl 변수의 값을 간단히 수정하여 이미지를 업데이트할 수 있습니다.

blobUrl = URL.createObjectURL(file);
if (imgPreview.src) {
  URL.revokeObjectURL(imgPreview.src);
}
imgPreview.src = blobUrl;

웹사이트나 애플리케이션에서 이미지를 완전히 제거하려면 이전 코드 조각을 사용하여 추가하세요. in 현재 이미지 소스의 URL은 blobUrl 변수에 저장됩니다. 이미지를 삭제해야 하는 경우 간단히 URL.revokeObjectURL() 메서드를 호출하고 이전에 저장된 이미지 URL을 전달하면 됩니다.

결론:

JavaScript에서 로컬 이미지를 삭제하는 방법은 여러 가지가 있을 수 있지만 URL.createObjectURL() 및 URL.revokeObjectURL() 메서드를 사용하는 것이 가장 일반적이고 효율적인 방법 중 하나입니다. 이 방법을 사용하여 로컬 이미지를 추가 또는 업데이트하고 필요한 경우 이미지를 삭제할 수 있습니다.

위 내용은 로컬 이미지 자바스크립트를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!