Проверить, существует ли изображение на сервере с использованием JavaScript?

Question

Проверить, существует ли изображение на сервере с использованием JavaScript?

Используя javascript, можно ли узнать, доступен ли ресурс на сервере? Например, у меня есть изображения 1.jpg - 5.jpg, загруженные в html-страницу. Я хотел бы вызывать функцию JavaScript каждую минуту или около того, чтобы примерно выполнить следующий рабочий код...

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

Мысли? Спасибо!

163

javascript

Источник

user1535865 16 сен '13 в 21:36

19 ответов

Решение

Вы можете использовать базовый способ работы preloaders изображений, чтобы проверить, существует ли изображение.

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

157

Источник

user14104 16 сен '13 в 21:43

Вы можете просто проверить, загружается изображение или нет, используя встроенные события, которые предусмотрены для всех изображений.

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

69

Источник

user965051 16 сен '13 в 21:42

Лучший и современный подход - использовать 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 включен на сервере.

29

Источник

user4090386 18 май '19 в 07:47

Если кто-то заходит на эту страницу, желая сделать это в клиенте на основе React, вы можете сделать что-то похожее на приведенное ниже, оригинал ответа, предоставленный Софией Альперт из команды 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} />;
    );
}

17

Источник

user2860951 13 июл '16 в 18:25

В основном обещанная версия ответов @espascarello и @adeneo с запасным параметром:

const checkImage = (path, fallback) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = path;
    img.onload = () => resolve(path);
    img.onerror = () => resolve(fallback);
  });
};

// Usage:

const link = checkImage(
  '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, даже если ваш файл не существует. Это, с другой стороны, сделает работу.

15

Источник

user8252267 04 дек '18 в 08:19

Если вы создаете тег изображения и добавляете его в DOM, его событие onload или onerror должно сработать. Если происходит ошибка, изображение не существует на сервере.

6

Источник

user119271 16 сен '13 в 21:39

Вы можете вызвать эту функцию 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;
    }
}

5

Источник

user2142994 16 ноя '16 в 05:11

Просто Promise функциональные версии ответов здесь с true/ false возвращаемое значение:

С участием `img` нагрузка:

Версии TypeScript:

      async function imageExists(imgUrl: string | null | undefined): Promise<boolean> {
  if (!imgUrl) {
    return false;
  }

  return new Promise(res => {
    const image = new Image();
    image.onload = () => res(true);
    image.onerror = () => res(false);
    image.src = imgUrl;
  });
}

async function fileExists(fileUrl: string | null | undefined): Promise<boolean> {
  if (!fileUrl) {
    return false;
  }

  return new Promise(res => {
    const http = new XMLHttpRequest();

    http.open('HEAD', fileUrl, false);
    http.send();
    http.onload = () => {
        res(http.status != 404);
    };
    http.onerror = () => {
        res(false);
    };

  });
}


async function fileExists(fileUrl: string | null | undefined): Promise<boolean>  {
  if (!fileUrl) {
    return false;
  }
  const res = await fetch(fileUrl, {
    method: 'HEAD',
  });

  return !!res.ok;
}

3

Источник

user2519073 07 окт '21 в 16:09

Вы можете сделать это с помощью ваших axios, установив относительный путь к соответствующей папке изображений. Я сделал это для получения файла JSON. Вы можете попробовать тот же метод для файла изображения, вы можете сослаться на эти примеры

Если вы уже установили экземпляр axios с baseurl в качестве сервера в другом домене, вам придется использовать полный путь статического файлового сервера, на котором вы развертываете веб-приложение.

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

Если изображение найдено, ответ будет 200, а если нет, то будет 404.

Кроме того, если файл изображения присутствует в папке assets внутри src, вы можете выполнить требование, получить путь и выполнить вышеуказанный вызов с этим путем.

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

3

Источник

user1971908 30 май '18 в 09:59

У меня были некоторые проблемы с отображением изображения пользователя через JS, которое иногда могло отсутствовать.

Оказывается, вы можете сделать следующее в html, чтобы отобразить определенное изображение, когда загрузка изображения не удалась.

Просто хотел поделиться... Возможно, это сэкономит вам время!

3

Источник

user1081501 03 янв '22 в 10:22

Это отлично работает:

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

2

Источник

user4563519 18 апр '18 в 11:56

Это отлично работает, если вы хотите знать, находится ли изображение в папке

      function checkImage(var, extension){
  var image = new Image();
  var url_image = './folder/' + var + '.' + extension;
  image.src = url_image;
  if (image.width == 0) {
    return false;
  } else {
    return true;
  }
}

1

Источник

10 сен '21 в 20:39

Если вы используете React, попробуйте этот пользовательский компонент изображения:

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import defaultErrorImage from 'assets/images/default-placeholder-image.png';

const Image = ({ src, alt, className, onErrorImage }) => {
  const imageEl = useRef(null);
  return (
    <img
      src={src}
      alt={alt}
      className={className}
      onError={() => {
        imageEl.current.src = onErrorImage;
      }}
      ref={imageEl}
    />
  );
};

Image.defaultProps = {
  onErrorImage: defaultErrorImage,
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string.isRequired,
  onErrorImage: PropTypes.string,
};

export default Image;

1

Источник

user8105231 17 ноя '20 в 06:01

      function checkImage(var){
  var image = new Image();
  var url_image = './folder/' + variable + '.jpg';
  image.src = url_image;
  if (image.width == 0) {
    return false;
  } else {
    return true;
  }
}

0

Источник

user15682864 10 сен '21 в 17:36

Это код работает для меня. Я обнаружил, что когда вы тестируете несколько изображений в массиве и хотите сразу вернуться, это не сработает.

Вам нужно дать браузеру некоторое время, чтобы загрузить изображение, иначе оно не будет работать.

Решения работают нормально:

0

Источник

user17743647 16 фев '22 в 00:58

Я нашел свое собственное решение: получить изображение и проверить статус ответа

      var path = "../folder/image.jpg";

fetch(path)
  .then(function(response) {
      if(response.status != 200){
            console.log("The image exists");
        }else{
            console.log("The image doesn't exist");
         }
     })

0

Источник

user16860764 29 июн '22 в 09:31

Простой эффективный, одна строка кода.

      var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

-1

Источник

user15336937 23 июл '22 в 03:42

Вы можете обратиться по этой ссылке, чтобы проверить, существует ли файл изображения с помощью 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'`;
    } } ```

-3

Источник

user11320219 25 окт '19 в 07:44

Другие вопросы по тегам javascript

user1223293 16 сен '13 в 21:38 2013-09-16 21:38 · Accepted Answer · 2013-09-16 21:38

Вы можете использовать что-то вроде:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

Очевидно, что вы можете использовать jQuery/ Similar для выполнения вашего HTTP-запроса.

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

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

    })

Проверить, существует ли изображение на сервере с использованием JavaScript?

19 ответов

С участием img нагрузка:

Версии TypeScript:

С участием `img` нагрузка: