JavaScript를 사용하는 서버에 이미지가 있는지 확인하십시오.

자바 스크립트를 사용하면 서버에서 리소스를 사용할 수 있는지 알 수있는 방법이 있습니까? 예를 들어 1.jpg-5.jpg 이미지가 html 페이지에로드되었습니다. 매분마다 JavaScript 함수를 호출하여 대략 다음 스크래치 코드를 수행하고 싶습니다.

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(){ alert("good"); }, function(){ alert("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 = '/error.png';

    document.body.appendChild(err);
}

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

사람이이이 작업을 수행하고자하는이 페이지에 오는 경우 반작용 기반 클라이언트를, 당신은 팀 반응의 소피아 알퍼트가 제공하는 응답 원래 있던 다음과 같이 수행 할 수 여기를

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} />;
    );
}

더 좋고 현대적인 접근 방식은 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가 활성화되어 있는지 확인하십시오.

이미지 태그를 만들어 DOM에 추가하면 onload 또는 onerror 이벤트가 실행됩니다. 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;
    }
}

기본적 으로 @espascarello 및 @adeneo 답변 의 약속 된 버전이며 fallback 매개 변수가 있습니다.

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)

// It can be also implemented using the async / await API.

참고 : 개인적으로 fetch솔루션이 더 마음에들 수도 있지만 단점이 있습니다. 서버가 특정 방식으로 구성되면 파일이 존재하지 않더라도 200/304를 반환 할 수 있습니다. 반면에 이것은 일을 할 것입니다.

해당 이미지 폴더의 상대 경로를 설정하여 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 폴더에 있으면 요청을 수행하고 경로를 가져와 해당 경로로 위의 호출을 수행 할 수 있습니다.

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

이것은 잘 작동합니다.

function checkImage(imageSrc) {
    var img = new Image();        
    try {
        img.src = imageSrc;
        return true;
    } catch(err) {
        return false;
    }    
}

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

checkImageExist.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'`;
    } } ```