How to check if an image exists?

Question

Yii

How to check if an image exists?

function fetch_highest_res(videoid) {
  var resolutions = ['maxresdefault', 'hqdefault', 'mqdefault'];
  for( var i = 0; i < resolutions.length; i++) {
      var checkImg = false;
      var img = new Image();
      img.src = 'https://i.ytimg.com/vi/' + videoid + '/' + resolutions[i] + '.jpg';
      img.load = function() { checkImg = true; }
      if(checkImg) {      	
      	return resolutions[i];
      	break;
      }
    }
}

console.log(fetch_highest_res('eei-soH5Gx8')); // hqdefault

Answer 1

if ($model->load(Yii::$app->request->post()) && $model->validate()) {
            $value = UploadedFile::getInstance($model, 'logo');
            if ($value) {
                $name = Yii::$app->security->generateRandomString() . ".{$value->extension}";
                $model->logo = $name;
                if ($model->save()) {
                    $value->saveAs(Yii::getAlias('@webroot') . '/uploads/' . $name);
                    return $this->redirect('/admin/');
                }
            }
        }

Answer 2

Well, firstly, assigning a function to img.load will not give any result, if you want to hang an event handler, then you need to assign it to img.onload
Secondly, this handler works asynchronously, when you do the check, it has not yet been executed, but will be executed it is only when the picture is loaded
. And finally, thirdly, if there is no picture, then the load event will never happen, you need to check the error event to track the loading error, and at the same time set a timeout so as not to wait forever for loading. The
easiest way to implement this with promises (if you need support for older browsers, add a polyfill):

// для начала я вынесу массив с разрешениями из функции, чтоб не создавать его для каждого вызова:
var resolutions = ['maxresdefault', 'hqdefault', 'mqdefault'];
function fetch_highest_res(videoid) {
  // сама функция будет возвращать промис, полученный сверткой массива resolutions
  return resolutions.reduce(
    function(promise, resolution) {
      // перехватываем только ошибку загрузки, если была успешная загрузка - просто отдаем ее дальше
      return promise.catch(function() {
        return new Promise(function(resolve, reject) {
          var img = new Image();
          // повесим таймаут в 3 секунды (если надо, поставьте больше), генерирующий ошибку
          setTimeout(reject, 3000);
          // отследим ошибку загрузки
          img.onerror = reject;
          // а в случае успешной загрузки отдадим результат
          img.onload = function() {
            resolve(resolution);
          };
          // и только когда навесили обработчики начинаем загрузку
          img.src = 'https://i.ytimg.com/vi/' + videoid + '/' + resolution + '.jpg';
        });
      });
    },
    // в качестве инициализирующего значения отдаем отклоненный промис
    // так как следующая картинка должна пробоваться только если не получилось загрузить предыдущую
    // а отслеживать мы это будем по ошибке загрузки
    Promise.reject()
  // ну и перехватим случай, если ничего не удалось загрузить
  ).catch(function() { return null; });
}

// ну и функция теперь у нас возвращает асинхронный результат в виде промиса
// поэтому и получать его надо соответствующе
fetch_highest_res('eei-soH5Gx8').then(function(resolution) {
  console.log(resolution); // hqdefault
});

PS I did everything in es5, because you never know, you need support for junk, and you obviously don’t use the assembly ...

Answer 3

img.error = function () {}

Answer 4

Approximately according to this principle. If I understand you correctly. Or formulate the question in more detail.

var element=document.getElementById('logo');
 if(!element){alert('меня нет на странице');} else {alert('я присутствую');}

p.s. I haven't written in javascript for a long time. But it seems that if the variable is used only in the { } scope, then it is recommended to use let and not var

Answer 5

you can get a request by img.src to do and change checkImg if the status is 200