자바스크립트를 이용하여 서버에 이미지가 존재하는지 확인?

자바스크립트를 이용하여 서버에 이미지가 존재하는지 확인?

javascript를 이용하여 서버에 리소스가 있는지 확인할 수 있는 방법이 있습니까?예를 들어 html 페이지에 이미지 1.jpg - 5.jpg가 로드되어 있습니다.자바스크립트 함수를 1분 정도마다 호출하고 싶은데 대략 다음과 같은 스크래치 코드를...

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

생각은?감사합니다!

다음과 같은 것을 사용할 수 있습니다.

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

분명 당신은 당신의 HTTP 요청을 수행하기 위해 jQuery/similar를 사용할 수 있습니다.

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

이미지 프리로더의 기본 작동 방식을 사용하여 이미지가 존재하는지 테스트할 수 있습니다.

    function checkImage(imageSrc, good, bad) {
        var img = new Image();
        img.onload = good; 
        img.onerror = bad;
        img.src = imageSrc;
    }
    
    checkImage("foo.gif", function(){ console.log("good"); }, function(){ console.log("bad"); } );

    checkImage("favicon.ico", function(){ console.log("good"); }, function(){ console.log("bad"); } );

JSFiddle

모든 이미지에 대해 제공되는 내장 이벤트를 사용하여 이미지 로드 여부만 확인할 수 있습니다.

그onload그리고.onerror이벤트를 통해 이미지가 성공적으로 로드되었는지 또는 오류가 발생했는지 여부를 알 수 있습니다.

var image = new Image();

image.onload = function() {
    // image exists and is loaded
    document.body.appendChild(image);
}
image.onerror = function() {
    // image did not load

    var err = new Image();
    err.src = '/favicon.ico';

    document.body.appendChild(err);
}

image.src = "../imgs/6.jpg";

ES6 Fetch API를 사용하여 이미지가 존재하는지 여부를 확인하는 것이 더 나은 현대적인 방법입니다.

fetch('https://via.placeholder.com/150', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));

동일한 오리진 요청을 하고 있거나 서버에서 CORS가 활성화되어 있는지 확인합니다.

React 기반 클라이언트에서 이 작업을 수행하려면 아래와 같은 작업을 수행할 수 있습니다. 여기 React 팀의 Sophia Alpert가 제공한 답변 원본입니다.

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

기본적으로 @espascarello 및 @adeneo 답변의 약속된 버전과 폴백 매개 변수:

const getImageOrFallback = (path, fallback) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = path;
    img.onload = () => resolve(path);
    img.onerror = () => resolve(fallback);
  });
};

// Usage:

const link = getImageOrFallback(
  'https://www.fillmurray.com/640/360',
  'https://via.placeholder.com/150'
  ).then(result => console.log(result) || result)

2021년 3월 편집 @hitautodestruct 와의 대화 후에 나는 더 "정통적인" 버전을 추가하기로 결정했습니다.Promise기본 함수onerrorcase가 지금 거부되고 있지만 발견되어 기본값을 반환합니다.

function getImageOrFallback(url, fallback) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = url
    img.onload = () => resolve(url)
    img.onerror = () => {
      reject(`image not found for url ${url}`)
    }
  }).catch(() => {
    return fallback
  })
}

getImageOrFallback("https://google.com", "https://picsum.photos/400/300").then(validUrl => {
  console.log(validUrl)
  document.body.style.backgroundImage = `url(${validUrl})`
})

html, body {
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow-y: hidden;
}

참고: 개인적으로 마음에 들 수 있습니다.fetch솔루션을 더 많이 제공합니다. 그러나 서버가 특정한 방식으로 구성되어 있으면 파일이 존재하지 않더라도 200/304를 반환할 수 있습니다.하지만 이것이 그 일을 해낼 것입니다.

이미지 태그를 생성하여 DOM에 추가하면 해당 태그의 onload 또는 onerror 이벤트가 발생합니다.오류가 발생하면 이미지가 서버에 존재하지 않습니다.

다음 JS 함수를 호출하여 서버에 파일이 있는지 확인할 수 있습니다.

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

Axios(액시오스)를 사용하여 해당 이미지 폴더에 대한 상대 경로를 설정할 수 있습니다.저는 json 파일을 받기 위해 이것을 했습니다.이미지 파일에 대해서도 동일한 방법을 시도할 수 있으며, 이러한 예를 참조할 수 있습니다.

baseurl이 다른 도메인의 서버로 이미 axios 인스턴스를 설정한 경우 웹 애플리케이션을 배포하는 정적 파일 서버의 전체 경로를 사용해야 합니다.

  axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
            console.log(response)
        }).catch((error) => {
            console.log(error)
        })

이미지가 발견되면 응답이 200이 되고 발견되지 않으면 404가 됩니다.

또한 이미지 파일이 src 내부의 assets 폴더에 있으면 required를 수행하고 경로를 가져온 후 해당 경로로 위의 호출을 수행할 수 있습니다.

var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)

.Promise전을 버전을 참조하십시오.true/false값:

와 함께new Image();메소드(preferred):

async function imageExists(imgUrl) {
    if (!imgUrl) {
        return false;
    }
    return new Promise(res => {
        const image = new Image();
        image.onload = () => res(true);
        image.onerror = () => res(false);
        image.src = imgUrl;
    });
}

// test
(async () => {
  // true
  console.log(await imageExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await imageExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
})()

와 함께XMLHttpRequest(데이터는 적지만 코르스 문제가 발생할 수도 있음):

async function fileExists(fileUrl) {
    if (!fileUrl) {
        return false;
    }
    return new Promise(res => {
        const http = new XMLHttpRequest();
        http.open('HEAD', fileUrl, true);
        http.send();
        http.onload = () => {
            res(http.status != 404);
        };
        http.onerror = () => {
            res(false);
        };
    });
}

// test
(async () => {
  // true
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
})()

와 함께fetch 저,소, CORS능)

async function fileExists(fileUrl) {
    if (!fileUrl) {
        return false;
    }
    const res = await fetch(fileUrl, {
      method: 'HEAD',
    });
    return !!res.ok;
}

// test
(async () => {
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
  

})()

스크립트 버전을 입력합니다.

// with `new Image();` method
async function imageExists(imgUrl: string | null | undefined): Promise<boolean> {
  if (!imgUrl) {
    return false;
  }

  return new Promise(res => {
    const image = new Image();
    image.onload = () => res(true);
    image.onerror = () => res(false);
    image.src = imgUrl;
  });
}

// with `XMLHttpRequest` method
async function fileExists(fileUrl: string | null | undefined): Promise<boolean> {
  if (!fileUrl) {
    return false;
  }

  return new Promise(res => {
    const http = new XMLHttpRequest();

    http.open('HEAD', fileUrl, false);
    http.send();
    http.onload = () => {
        res(http.status != 404);
    };
    http.onerror = () => {
        res(false);
    };

  });
}

// with `fetch` method
async function fileExists(fileUrl: string | null | undefined): Promise<boolean>  {
  if (!fileUrl) {
    return false;
  }
  const res = await fetch(fileUrl, {
    method: 'HEAD',
  });

  return !!res.ok;
}

JS를 통해 사용자 이미지를 표시하는 데 어려움을 겪고 있었습니다. 사용자 이미지가 누락된 경우 오류가 발생했습니다.

이미지의 로딩이 실패했을 때 특정 이미지를 표시하기 위해 html에서 다음을 수행할 수 있는 것으로 나타났습니다.

<img src="img/path/image.png" onerror="javascript:this.src='img/path/no-image.png'">

그냥 공유하고 싶었을 뿐인데...아마도 이것이 여러분을 위해 시간을 절약할 수 있을 것입니다!

React(반응)을 사용하는 경우 이 사용자 지정 Image(이미지) 구성 요소를 사용해 보십시오.

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import defaultErrorImage from 'assets/images/default-placeholder-image.png';

const Image = ({ src, alt, className, onErrorImage }) => {
  const imageEl = useRef(null);
  return (
    <img
      src={src}
      alt={alt}
      className={className}
      onError={() => {
        imageEl.current.src = onErrorImage;
      }}
      ref={imageEl}
    />
  );
};

Image.defaultProps = {
  onErrorImage: defaultErrorImage,
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string.isRequired,
  onErrorImage: PropTypes.string,
};

export default Image;

이미지가 폴더에 있는지 알고 싶을 때는 이 작업이 가능합니다.

function checkImage(var, extension){
  var image = new Image();
  var url_image = './folder/' + var + '.' + extension;
  image.src = url_image;
  return image.width !== 0;
}

function checkImage(var){
  var image = new Image();
  var url_image = './folder/' + variable + '.jpg';
  image.src = url_image;
  if (image.width == 0) {
    return false;
  } else {
    return true;
  }
}

이것은 나를 위한 암호작업입니다.여러 이미지를 배열로 테스트해 보고 즉시 반환하려고 하면 작동하지 않는 것을 발견했습니다.

브라우저에 이미지를 로드할 시간을 주어야 합니다. 그렇지 않으면 이미지가 작동하지 않습니다.

솔루션이 잘 작동합니다.

let images = ["invalid.jpg", "invalid2.jpg", "https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png"]
let workedimages = images.slice()
images.forEach((item, index) => {
  let img = new Image()
  img.src = item
  img.onerror = () => workedimages.splice(workedimages.indexOf(item), 1)
  if (index == images.length - 1) {
    img.onload = () =>
      console.log(workedimages)
  }
})

나만의 해결책을 찾았습니다. 이미지를 가져와 응답 상태를 확인합니다.

var path = "../folder/image.jpg";

fetch(path)
  .then(function(response) {
      if(response.status != 200){
            console.log("The image exists");
        }else{
            console.log("The image doesn't exist");
         }
     })

단순하고 효과적인 코드 한 줄.

var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

이 링크를 참조하여 자바스크립트로 이미지 파일이 존재하는지 확인할 수 있습니다.

ImageExist.js를 확인합니다.

    var image = new Image();
    var url_image = './ImageFolder/' + variable + '.jpg';
    image.src = url_image;
    if (image.width == 0) {
       return `<img src='./ImageFolder/defaultImage.jpg'>`;
    } else {
       return `<img src='./ImageFolder/`+variable+`.jpg'`;
    } } ```

언급URL : https://stackoverflow.com/questions/18837735/check-if-image-exists-on-server-using-javascript