জাভাস্ক্রিপ্ট ব্যবহার করে বলার উপায় আছে কি সার্ভারে কোনও সংস্থান পাওয়া যায়? উদাহরণস্বরূপ আমার কাছে চিত্রগুলি রয়েছে 1.jpg - 5.jpg এইচটিএমএল পৃষ্ঠায় লোড। আমি প্রতি মিনিটে একটি জাভাস্ক্রিপ্ট ফাংশন কল করতে চাই যাতে প্রায় নিম্নলিখিত স্ক্র্যাচ কোডটি করতে পারে ...
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;
}স্পষ্টতই আপনি আপনার এইচটিটিপি অনুরোধ সম্পাদন করতে jQuery / অনুরূপ ব্যবহার করতে পারেন।
$.get(image_url)
.done(function() {
// Do something now you know the image exists.
}).fail(function() {
// Image doesn't exist - do something else.
})fileExistsআরও ভাল নাম হবে কারণ এই ফাংশনটি সার্ভারে চিত্রের উপস্থিতি আছে কিনা তা পরীক্ষা করে না। সার্ভার থেকে ফাইল অ্যাক্সেসযোগ্য কিনা তা এটি পরীক্ষা করে। সেই ফাইলটি আসলে কোনও চিত্র কিনা সে বিষয়ে কোনও চেক নেই। এটি .pdf, .html হতে পারে, কিছু এলোমেলো ফাইলের নাম পরিবর্তন করা হয়েছে * .jpg বা * .png। .Jpg দিয়ে যদি কিছু শেষ হয় তবে এর অর্থ এটি 100% চিত্র নয় :)
Imageঅবজেক্ট ব্যবহার করা সেই সীমাবদ্ধতায় ভোগে না। এর একমাত্র সুবিধা হ'ল এটি চিত্রটি আসলে ডাউনলোড করবে না।
কোনও চিত্র বিদ্যমান থাকলে তা পরীক্ষা করার জন্য আপনি ইমেজ প্রিলোডাররা বুনিয়াদি যেভাবে কাজ করেন তা ব্যবহার করতে পারেন।
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"); } );return@jtrichards তার উত্তর প্রথম অংশে মত একটি বিবৃতি দিয়ে সাধারণত এটি করব ।
আপনি কেবলমাত্র সমস্ত চিত্রের জন্য সরবরাহ করা ইভেন্টগুলি অন্তর্নির্মিত ব্যবহার করে চিত্রটি লোড হচ্ছে কিনা তা পরীক্ষা করতে পারেন।
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";errorহ্যান্ডলারটিকে ট্রিগার করবে ।
যদি কেউ এই পৃষ্ঠাটিতে প্রতিক্রিয়া ভিত্তিক ক্লায়েন্টে এটি করতে দেখেন, আপনি নীচের মতো কিছু করতে পারেন, যা এখানে একটি প্রতিক্রিয়ার টিমের সোফিয়া আল্পার্টের দেওয়া উত্তর উত্তর ছিল was
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('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 সক্ষম করা আছে is
সার্ভারে ফাইল রয়েছে কিনা তা পরীক্ষা করতে আপনি এই জেএস ফাংশনটিকে কল করতে পারেন:
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;
}
}ফ্যালব্যাক প্যারামিটার সহ বেসিক্যালি @ এস্পাসেকেরেলো এবং @ অ্যাডেনিয়ো উত্তরগুলির একটি প্রতিশ্রুতিবদ্ধ সংস্করণ:
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 ফেরত দিতে পারে। এটি, অন্যদিকে, কাজটি করবে।
fetch, আপনি অনুরোধটি সফল হয়েছে কিনা তা যাচাই করতে আপনি বস্তুর okসম্পত্তিটি ব্যবহার করতে পারেন response: fetch(url).then(res => {if(res.ok){ /*exist*/} else {/*not exist*/}});
background-image: url('/a/broken/url')আমাকে 200এবং ok(Chrome 74) দেয় 74
আপনি নিজের অক্ষর দিয়ে এটি সম্পর্কিত ইমেজ ফোল্ডারে আপেক্ষিক পথ নির্ধারণ করে করতে পারেন। আমি একটি জসন ফাইল পাওয়ার জন্য এটি করেছি। আপনি একটি চিত্র ফাইলের জন্য একই পদ্ধতি চেষ্টা করতে পারেন, আপনি এই উদাহরণগুলি উল্লেখ করতে পারেন
আপনি যদি ইতিমধ্যে ভিন্ন ডোমেনে সার্ভার হিসাবে বেসুরলের সাথে একটি অক্ষর উদাহরণ স্থাপন করে থাকেন তবে আপনাকে ওয়েব অ্যাপ্লিকেশন স্থাপনের ক্ষেত্রে স্ট্যাটিক ফাইল সার্ভারের পুরো পথটি ব্যবহার করতে হবে।
axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})যদি চিত্রটি পাওয়া যায় তবে প্রতিক্রিয়াটি 200 হবে এবং যদি তা না হয় তবে তা 404 হবে।
এছাড়াও, যদি চিত্র ফাইলটি এসসিআরের অভ্যন্তরে সম্পদ ফোল্ডারে উপস্থিত থাকে তবে আপনি প্রয়োজনীয়তা অর্জন করতে পারেন, সেই পথটি দিয়ে উপরের কলটি করতে পারেন।
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;
}
}জাভাস্ক্রিপ্টের সাথে কোনও চিত্র ফাইল উপস্থিত রয়েছে কিনা তা পরীক্ষা করার জন্য আপনি এই লিঙ্কটি উল্লেখ করতে পারেন।
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'`; } } ```