चेक करें कि क्या जावास्क्रिप्ट का उपयोग करने वाले सर्वर पर छवि मौजूद है?

Question

जावास्क्रिप्ट का उपयोग करना यह बताने का एक तरीका है कि क्या सर्वर पर कोई संसाधन उपलब्ध है? उदाहरण के लिए मेरे पास 1.jpg - 5.jpg है जो html पृष्ठ में लोड है। मैं हर मिनट एक जावास्क्रिप्ट फ़ंक्शन को कॉल करना चाहूंगा ताकि मोटे तौर पर निम्नलिखित स्क्रैच कोड हो ...

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

विचार? धन्यवाद!

Answer 1

आप कुछ इस तरह का उपयोग कर सकते हैं:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

जाहिर है आप अपने HTTP अनुरोध को करने के लिए jQuery / समान का उपयोग कर सकते हैं।

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

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

    })

Comments

लेकिन यह फ़ंक्शन नाम नहीं होना चाहिए क्योंकि यह .js .css .html या किसी अन्य सार्वजनिक रूप से उपलब्ध फ़ाइल पर काम करता है।

— CoR

फंक्शन कमाल का है। मैंने इसे अपने संग्रह में डाल दिया :) मुझे लगा fileExistsकि बेहतर नाम होगा क्योंकि यह फ़ंक्शन यह जांच नहीं करता है कि क्या छवि सर्वर पर मौजूद है। यह जाँचता है कि क्या फ़ाइल सर्वर से सुलभ है। कोई जाँच नहीं है कि क्या वास्तव में एक छवि है। यह .pdf, .html, कुछ यादृच्छिक फ़ाइल का नाम * .jpg या * .png हो सकता है। अगर कुछ के साथ समाप्त होता है .jpg इसका मतलब यह नहीं है कि यह 100% छवि है :)

— CoR

यह विफल हो जाएगा जब तक कि संसाधन तक पहुँचने को कोर नियमों के तहत अनुमति नहीं है। किसी Imageऑब्जेक्ट का उपयोग करने से वह सीमा समाप्त नहीं होती है। इसका एकमात्र लाभ यह है कि यह वास्तव में छवि को डाउनलोड नहीं करेगा।

— अलनीतक

क्रॉस-डोमेन समस्या।

— अमित कुमार

यह काम करता है, लेकिन ध्यान रखें कि अनुरोध को संसाधित करने में अधिक समय लगता है और सबसे अच्छा समाधान नहीं है। इसके अलावा यह क्रॉस ओरिजिनल (निश्चित रूप से क्रोम में) काम नहीं करता है, इसलिए आप इसे फाइल पर उपयोग नहीं कर सकते हैं: /// प्रोटोकॉल जिसका अर्थ है कोई स्थानीय उपयोग नहीं।

— कैमरन

Answer 2

यदि छवि मौजूद है, तो आप परीक्षण करने के लिए मूल तरीके से छवि प्रीलोडर का उपयोग कर सकते हैं।

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

Comments

अरे, कूल फंक्शन! एक साइड नोट के रूप में, यह परिणामों को वापस करने का एक दिलचस्प तरीका है, एक अनाम फ़ंक्शन में प्रत्यक्ष। मैं सामान्य रूप से ऐसा returnकरूंगा जैसे कि @ajtrichards उनके उत्तर के पहले भाग में है।

— सेबलफोस्टे

पूर्ण रूप से; लेकिन मैं वास्तव में तुल्यकालिक होने के दूसरे तरीके के बारे में कभी नहीं सोचा था। मैं प्रक्रियात्मक कोडिंग के एक लंबे इतिहास से आ रहा हूं, और कभी-कभी चीजों को देखने के "अन्य" तरीके को याद करता हूं ... मैं शर्त लगाता हूं कि मैं अकेला नहीं हूं। ;-)

— सेबलफोस्टे

भविष्य के googlers को इस समस्या से जूझने के लिए, नई छवि रेखा के तुरंत बाद img.src परिभाषा को स्थानांतरित करने का प्रयास करें।

— गेविन

Answer 3

आप बस जाँच कर सकते हैं कि सभी छवियों के लिए प्रदान की गई घटनाओं में निर्मित का उपयोग करके छवि लोड होती है या नहीं।

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";

Comments

मेरे लिए सबसे अच्छा जवाब, क्योंकि यह हर मामले में काम करता है (कंजेशन की समस्या, बाहरी सर्वर ...) +1

— शासनकाल .85

AJAX.get विकल्प के साथ इस उत्तर के प्रदर्शन की तुलना करें। यह जवाब बहुत तेज प्रदर्शन करता है!

— शमूएल

मुझे यह समाधान पसंद है, किसी भी तरह यह दोनों मामलों (अतुल्यकालिक निष्पादन) में घटनाओं का परिचय देता है, जो कुछ स्थितियों में समस्याएं पैदा कर सकता है: मैं किसी भी मामले में छवि को जोड़ने और फिर त्रुटियों के मामले में इसे प्रतिस्थापित करने का सुझाव दूंगा।

— जियोर्जियो टेम्पस्टा

@adeno, क्या यह तब काम करता है जब Status Code: 404 Not Found

— MahiMan

@ माही - स्थिति कोड कोई फर्क नहीं पड़ता, क्योंकि 404 पृष्ठ वास्तव में एक वैध छवि नहीं लौटाते हैं, यह विफल हो जाएगा और errorहैंडलर को ट्रिगर करेगा ।

— एडेनो

Answer 4

यदि कोई इस पेज पर रिएक्ट- आधारित क्लाइंट में ऐसा करने के लिए आता है , तो आप नीचे दिए गए कुछ कर सकते हैं, जो कि प्रतिक्रिया टीम के सोफिया अल्परट द्वारा प्रदान किया गया उत्तर था ।

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

Answer 5

एक बेहतर और आधुनिक तरीका यह है कि कोई छवि मौजूद है या नहीं, यह जांचने के लिए 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 सक्षम है।

Answer 6

यदि आप एक छवि टैग बनाते हैं और इसे DOM में जोड़ते हैं, तो इसके ऑनलोड या ऑनरोर इवेंट में आग लगनी चाहिए। अगर ऑनर फायर होता है, तो छवि सर्वर पर मौजूद नहीं है।

Answer 7

सर्वर पर फ़ाइल मौजूद है या नहीं यह जाँचने के लिए आप इस 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;
    }
}

Comments

अच्छा प्रयास। लेकिन एकल रूप में कई छवियों को लोड करते समय बहुत कम समय लगता है।

— नुवान विथानागे

यदि url मौजूद नहीं है तो यह xhr.send () में त्रुटि दिखाता है।

— अविनाश शर्मा

Answer 8

मूल रूप से एक गिरावट के साथ @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)

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

नोट: मैं व्यक्तिगत रूप से fetchसमाधान को अधिक पसंद कर सकता हूं , लेकिन इसमें एक खामी है - यदि आपका सर्वर एक विशिष्ट तरीके से कॉन्फ़िगर किया गया है, तो यह 200/304 वापस कर सकता है, भले ही आपकी फ़ाइल मौजूद न हो। दूसरी ओर, यह काम करेगा।

Comments

के लिए fetch, आप उपयोग कर सकते हैं okकी संपत्ति responseकी जांच करने के लिए कि क्या वस्तु अनुरोध सफल था या नहीं: fetch(url).then(res => {if(res.ok){ /*exist*/} else {/*not exist*/}});

— attacomsian

अगर मैं वैध पृष्ठभूमि छवि की जांच करना चाहता हूं तो दुर्भाग्य से यह मेरे लिए काम नहीं करता है। background-image: url('/a/broken/url')मुझे 200और ok(Chrome 74) देता है।

— हाइनेक

Answer 9

आप संबंधित छवियों फ़ोल्डर के सापेक्ष पथ निर्धारित करके अपने अक्षतंतु के साथ ऐसा कर सकते हैं। मैंने एक json फ़ाइल प्राप्त करने के लिए ऐसा किया है। आप एक छवि फ़ाइल के लिए एक ही विधि का प्रयास कर सकते हैं, आप इन उदाहरणों का संदर्भ ले सकते हैं

यदि आपने पहले से ही विभिन्न डोमेन में सर्वर के रूप में बेसल के साथ एक अक्षीय उदाहरण सेट किया है, तो आपको स्थिर फ़ाइल सर्वर के पूर्ण पथ का उपयोग करना होगा जहां आप वेब एप्लिकेशन को तैनात करते हैं।

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

यदि छवि को पाया जाता है कि प्रतिक्रिया 200 होगी और यदि नहीं, तो यह 404 होगी।

इसके अलावा, अगर छवि फ़ाइल src के अंदर संपत्ति फ़ोल्डर में मौजूद है, तो आप एक आवश्यकता कर सकते हैं, पथ प्राप्त कर सकते हैं और उस पथ के साथ उपरोक्त कॉल कर सकते हैं।

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

Answer 10

यह ठीक काम करता है:

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

Comments

यकीन है कि यह हर बार सच है?

— ब्रैंडन मैक्लेज़

Answer 11

आप चेक के लिए इस लिंक का उल्लेख कर सकते हैं कि क्या कोई छवि फ़ाइल जावास्क्रिप्ट के साथ मौजूद है।

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

Comments

मैंने अभी यह परीक्षण किया है। यह काम नहीं करता है । यह हमेशा डिफ़ॉल्ट छवि देता है। (संभवतः क्योंकि HTTP का अनुरोध करने और इससे पहले कि आप इसकी चौड़ाई का परीक्षण करने का प्रयास करें, छवि को लोड करने के लिए ब्राउज़र के लिए कोई समय नहीं है)।

— क्वेंटिन