জাভাস্ক্রিপ্টে কোনও চিত্র লোড হতে ব্যর্থ হলে সনাক্ত করুন

Question

কোনও চিত্রের পথটি কোনও আসল চিত্রের দিকে পরিচালিত করে কিনা তা নির্ধারণ করার কোনও উপায় আছে, অর্থাত্, কোনও চিত্র জাভাস্ক্রিপ্টে লোড করতে ব্যর্থ হলে সনাক্ত করুন।

একটি ওয়েব অ্যাপ্লিকেশনের জন্য, আমি একটি এক্সএমএল ফাইল পার্স করছি এবং গতিশীলভাবে চিত্রের পাথের একটি তালিকা থেকে এইচটিএমএল চিত্র তৈরি করছি। কিছু চিত্রের পথ সার্ভারে আর উপস্থিত থাকতে পারে তাই কোন চিত্রটি এইচটিএমএল img উপাদান লোড করতে এবং মুছতে ব্যর্থ হয় তা সনাক্ত করে আমি কৃপণভাবে ব্যর্থ হতে চাই।

দ্রষ্টব্য জিকুয়েরির সমাধানগুলি ব্যবহার করতে সক্ষম হবে না (বস জিকুয়ারি ব্যবহার করতে চান না, হ্যাঁ আমি জানি যে আমাকে শুরু করতে চাই না)। আমি যখন কোনও চিত্র লোড হয় তখন সনাক্ত করার জন্য জিকুয়েরিতে একটি উপায় জানি, কিন্তু এটি ব্যর্থ হয়েছিল কিনা তা নয়।

আমার কোডটি আইএমজি উপাদান তৈরি করার জন্য তবে আমি কীভাবে সনাক্ত করতে পারি যদি ইমগ পাথ চিত্র লোড করতে ব্যর্থ হয়?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

Comments

এটি আপনাকে সাহায্য করতে পারে: স্ট্যাকওভারফ্লো.com / প্রশ্নগুলি / ১৯7787871১/২ (এটি jQuery হলেও এটি আপনাকে এখনও সঠিক পথে নিয়ে যেতে পারে)

— বেন লি

এই google.com/…

— ajax333221

মজার কথা @ অজ্যাক্স 333221 এই খুব প্রশ্নটি আপনার লিঙ্কের ফলাফলের মধ্যে প্রথম :)

— এসএসএইচ এই

নতুন বসকে খুঁজে পেতে একটি জিকুয়েরি নির্বাচক লিখুন ... ইন্টারনেট একটি বড় জায়গা।

— জেজেএস

needmorejquery.com

— ফেব্ব

Answer 1

আপনি নিম্নলিখিত কোড চেষ্টা করতে পারেন। আমি যদিও ব্রাউজারের সামঞ্জস্যের পক্ষে কোনও প্রমাণ দিতে পারি না, সুতরাং আপনাকে এটি পরীক্ষা করতে হবে।

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

এবং jQuery- প্রতিরোধী বসের জন্য আমার সহানুভূতি!

Comments

কোনও ধারণা যদি বলার উপায় থাকে তবে এটির পুনর্নির্দেশের মুখোমুখি হয় কিনা?

— কুইকশিফ্টিন

আপনি যে চিত্রটি পেয়ে যাচ্ছেন সেই সার্ভারের উপর নির্ভর করে এটি ওয়েবকিট (এপিফ্যানি, সাফারি, ...) এ কাজ করে না। উদাহরণস্বরূপ, কখনও কখনও ইমগুর এমন কোনও চিত্র প্রেরণ না করে যা উপস্থিত থাকে না এবং একটি 404 স্থিতি এবং ত্রুটি ইভেন্টটি এই ক্ষেত্রে ট্রিগার হয় না।

এতে সমস্যাটি হ'ল আপনার বার্তা, "সেই চিত্রটি পাওয়া যায় নি।" প্রতিক্রিয়া কোডটি 500 বা 403 বা অন্য কিছু হতে পারে। আপনি জানেন না যে এটি একটি 404 ছিল fact বাস্তবে এটি সম্ভবত খুব বেশি সম্ভাবনা নয় যেহেতু আপনি সম্ভবত চেষ্টা করবেন না এবং এমন কোনও চিত্র লোড করবেন না।

— পিএইচপি গুরু

সরাসরি অ্যাসাইনমেন্টের পরিবর্তে ইভেন্ট হ্যান্ডলার যুক্ত করা উচিত

— সিডালেক্সেন্ডার

Answer 2

উত্তরটি দুর্দান্ত, তবে এটি একটি সমস্যার পরিচয় দেয়। আপনি যখনই সরাসরি বরাদ্দ করেন onloadবা onerrorসরাসরি, এটি পূর্বে বরাদ্দ করা কলব্যাকটি প্রতিস্থাপন করতে পারে। এটা কেন আছে একটা চমৎকার পদ্ধতি হল "রেজিস্টার নিদিষ্ট শ্রোতা EventTarget তে এটি উপর বলা হচ্ছে" হিসাবে তারা বলার MDN । আপনি একই ইভেন্টে যতটা শ্রোতা চান তেমন নিবন্ধন করতে পারেন।

উত্তরটি কিছুটা আবার লিখি।

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

বাহ্যিক রিসোর্স লোডিং প্রক্রিয়া অ্যাসিনক্রোনাস হওয়ায় নীচের মতো প্রতিশ্রুতি সহ আধুনিক জাভাস্ক্রিপ্ট ব্যবহার করা আরও ভাল লাগবে।

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

Comments

সম্ভবত আমি কিছু মিস করছি, তবে "পরীক্ষক" স্রেফ তৈরি করা থাকলে অ্যাসাইনমেন্ট (টেস্টার.অনলোড = ..) কীভাবে কলব্যাক প্রতিস্থাপন করতে পারে? এমনকি কোডের কিছু অস্পষ্ট অংশ তৈরি প্রতিটি চিত্রে একটি ইভেন্ট যুক্ত করে, এটি স্পষ্ট নয় যে কোনও চিত্রের অস্তিত্ব আছে কিনা তা সনাক্ত করার উদ্দেশ্যে আমরা এই ইভেন্টগুলি রাখতে চাই।

— jvilhena

আপনি একেবারে সঠিক। এই বিশেষ ক্ষেত্রে এটি কোনও সমস্যা নাও হতে পারে কারণ এটি সম্ভবত প্রতিস্থাপনযোগ্য নয়। তবে, সাধারণভাবে, সরাসরি কোনও পদ্ধতি নির্ধারণের চেয়ে ইভেন্ট শ্রোতা যুক্ত করা ভাল অনুশীলন।

— emil.c

@ জনউইজ এ্যারো ফাংশনগুলি বেনামে রয়েছে, তাই ডিবাগ করা আরও শক্ত, এগুলি সাবধানে ব্যবহার করুন।

— emil.c

@ জিফকো আপনার সাথে এ জাতীয় আলোচনা চালিয়ে যেতে আমি স্বাচ্ছন্দ্য বোধ করি না। আমি আপনার ভাষা দ্বারা বিরক্ত বোধ। আপনি যদি বিশ্বাস করেন যে আমার উত্তরটি ভুল বা অসম্পূর্ণ, পরিবর্তনের পরামর্শ দিন এবং আপনার যুক্তিটি ব্যাখ্যা করুন। আপনি যদি মনে করেন যে কোনও কিছু খারাপ অভ্যাস, আপনার নিজের উত্তরের সাথে একটি ভাল অনুশীলনের পরামর্শ দিন।

— emil.c

এখানে তীর ফাংশন সম্পর্কে কেন আলোচনা হচ্ছে? এটি বন্ধ বিষয়। উত্তর ঠিক আছে ঠিক কীভাবে এটি বিশেষত যেহেতু পুরানো ব্রাউজারগুলি তীর ফাংশন সমর্থন করে না (উদাহরণস্বরূপ ইন্টারনেট এক্সপ্লোরার)।

— পিএইচপি গুরু

Answer 3

এই:

<img onerror="this.src='/images/image.png'" src="...">

Comments

যদিও এটি একটি দরকারী বৈশিষ্ট্য যা একটি চিত্র ব্যর্থ প্রযুক্তি হিসাবে ব্যবহার করা যেতে পারে, পাঠকদের পক্ষে এটি বোঝার জন্য আরও ভার্জিক প্রতিক্রিয়া সহায়ক হবে।

— sorak

এত সংক্ষিপ্ত এবং এত দরকারী! এটি কেবল আড়াল করার জন্য:<img src="your/path/that/might/fail.png" onerror="$(this).hide();"/>

— J0ANMM

@ সৌরকের মন্তব্য আমাকে ঘৃণা করে হাসতে লাগল। এটা সঠিক উত্তর.

— user3751385

@ জেএএনএনএমএম ছবিটি আড়াল করার আরেকটি উপায় হ'ল খালি এলটি বৈশিষ্ট্য যুক্ত করা: <img alt = "" src = "yourpicture.png">

— রিক গ্লিমার

অসাধারণ! একটি চিত্র হাতে ব্যর্থ পরিবর্তে আমি onerror = "this.alt = 'বৈধ নয় চিত্র, লিঙ্কটি ব্যবহার করুন ^" এই টেক্সট প্রিন্ট

— ঘর্মাক্ত

Answer 4

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

Answer 5

img জন্য jQuery + CSS

JQuery সহ এটি আমার জন্য কাজ করছে:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

এবং এই ছবিটি নীচের সিএসএস 3 বৈশিষ্ট্যের সাথে নির্ধারিত আকারের ছাড়াই আমার ওয়েবসাইটটিতে যে কোনও জায়গায় ব্যবহার করতে পারি:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

টিপ 1: একটি বর্গাকার চিত্র ব্যবহার করুন কমপক্ষে 800 x 800 পিক্সেলের

টিআইপি 2: লোকের প্রতিকৃতির সাথে ব্যবহারের জন্যobject-position: 20% 50%;

CSS কেবলমাত্র ব্যাকগ্রাউন্ড-ইমগের জন্য

অনুপস্থিত ব্যাকগ্রাউন্ড চিত্রগুলির জন্য, আমি প্রতিটি background-imageঘোষণায় নিম্নলিখিতগুলিও যুক্ত করেছি :

background-image: url('path-to-image.png'), url('no-img.png');

দ্রষ্টব্য: স্বচ্ছ চিত্রগুলির জন্য কাজ করছেন না।

অ্যাপাচি সার্ভারের পাশে

আরেকটি সমাধান হ'ল ব্রাউজারে প্রেরণের আগে অ্যাপাচি সহ হারিয়ে যাওয়া চিত্র সনাক্ত করা এবং এটি ডিফল্ট নো-ইমগ.পিএনজি সামগ্রী দ্বারা প্রতিস্থাপন করা।

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Answer 6

আমি অন্য একটি উত্তরের জন্য এখানে লিখেছি একটি ফাংশন: জাভাস্ক্রিপ্ট ইমেজ url যাচাই করুন । আমি যদি এটা আপনি ঠিক কী প্রয়োজন জানি না, কিন্তু এটা বিভিন্ন কৌশল যে আপনি ব্যবহার করেন, যার জন্য হ্যান্ডলার অন্তর্ভুক্ত ব্যবহার onload, onerror,onabort এবং একটি সাধারণ সময়সীমার।

চিত্র লোডিং অবিচ্ছিন্ন হওয়ায় আপনি এই চিত্রটিকে আপনার চিত্রের সাথে কল করেন এবং তারপরে ফলাফলের সাথে সাথে এটি আপনার কলব্যাকটি কল করে।

Answer 7

ঠিক নীচের মত:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}

Comments

নাঃ। এটি কিছু ব্রাউজারে চিত্রটি ক্যাশে হয়েছে কিনা তা আপনাকে আঁকড়ে থাকতে পারে - তবে লোড কলব্যাক ব্যতীত আপনি ব্রাউজারটিকে সেই চিত্রটির জন্য এইচটিটিপি অনুরোধ শুরু করার সুযোগ দেওয়ার জন্য এমনকি একটি মুহুর্তের জন্যও অপেক্ষা করছেন না।

— চেসমস্কাল

এটি কেবল কিছু বলার জন্য!

— হিটমান্ডস

চিত্র লোডিং অ্যাসিক্রোনাস।

— emil.c

@ এমিল.সি এটি কোনও কারণে সর্বদা হয় না। চেজমস্কাল (যার দ্বারা তিনি আমাকে অবহিত করতে পারবেন না ...) এটি ঠিক আছে - এটি তখনই কাজ করে যখন জেএস কার্যকর করা চালিয়ে যাওয়ার আগে চিত্রটি লোডিং শেষ করে, যা মনে হয় যখনই এটি ক্যাশ হয়ে যায়।

— ত্রিস্তান