Использование 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;
}
Очевидно, вы могли бы использовать jQuery/аналогичный для выполнения вашего HTTP-запроса.
$.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"); } );
Вы можете просто проверить, загружено ли изображение или нет, используя встроенные события, которые предоставляются для всех изображений.
События 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";
Если кто-то заходит на эту страницу, желая сделать это в клиенте React -based, вы можете сделать что-то вроде нижеприведенного, оригинал ответа, предоставленный Софией Альперт из команды React здесь
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} />;
);
}
Если вы создаете тег изображения и добавляете его в DOM, он должен запускать его событие onload или onerror. Если запущен onerror, изображение не существует на сервере.
Это прекрасно работает:
function checkImage(imageSrc) {
var img = new Image();
try {
img.src = imageSrc;
return true;
} catch(err) {
return false;
}
}
Вы можете вызвать эту функцию 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;
}
}
Вы можете сделать это с помощью ваших осей, установив относительный путь к соответствующей папке изображений. Я сделал это для получения json файла. Вы можете попробовать тот же метод для файла изображения, вы можете ссылаться на эти примеры
Если вы уже установили экземпляр axios с baseurl в качестве сервера в другом домене, вам придется использовать полный путь к статическому файловому серверу, где вы развертываете веб-приложение.
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(...)
В основном обещанная версия ответов @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.$("img").on("load",function(){
alert(" Image Exists...!");
}).on("error", function(){
alert("ERROR");
});
Лучший и современный подход - использовать 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 включен на сервере.