Не отображается картинка при первой загрузке?

Question

[misterobot404]

Computed, который проверяет, является ли ссылка ссылкой на картинку

Использование:

Но вопреки ожиданиям, когда он должен показывать картинку, он показывает псевдокод (хотя в консоли я вижу '400' - высоту картинки, на которую ссылаюсь). После первого запуска и кэширования картинки проблема исчезает, до следующего ^f5. Что подскажете?

Comments

[misterobot404]

При первом запуске на консоль получаю 400 (img.height). Но на экране вижу Псевдокод. wtf

[lavezzi1]

misterobot404, все верно. Первый раз отрабатывает console.log() который в коллбэке onload и return возвращает false потом что картинка в тот момент еще не загружена.

Answer 1

[0xD34F]

Загрузка картинки - операция асинхронная. Так что проверять высоту сразу после установки src - идея сильно так себе. Это надо делать после загрузки, в onload. Computed вам тут не сильно поможет.

Сделайте checkExistImages вместо вычисляемого свойства обычным, а на getSelectedEvent.mediaUrl повесьте наблюдателя, в котором и проверяйте картинку:

watch: {
  'getSelectedEvent.mediaUrl'(val) {
    const img = new Image();
    img.onload = () => this.checkExistImages = img.height > 0;
    img.onerror = () => this.checkExistImages = false;
    img.src = val;
  },
},

Ну или можете воспользоваться каким-нибудь плагином, реализующим асинхронные вычисляемые свойства, таким как vue-async-computed, например - возвращаете промис, который будет резолвиться в onload картинки, как-то так.

Comments

[misterobot404]

сделал через watch, но уже голова не варит, не подскажете как задать начальное значение для checkExistImages?


Потому что, пока я не вызову getSelectedEvent.mediaUrl значение checkExistImages не изменится на правильное, а при запуске моей страницы картинка уже должна быть (или нет)

[misterobot404]

Вроде сам сделал, спасибо

[0xD34F]

misterobot404,

пока я не вызову getSelectedEvent.mediaUrl

Это что, функция, чтобы её вызывать? Вроде бы строка - раз пытаетесь использовать в качестве src. Наверное, имеется в виду не "вызову", а "установлю новое значение"?

Сделайте наблюдателя вызываемым сразу же после установки:

watch: {
  'getSelectedEvent.mediaUrl': {
    immediate: true,
    handler(val) {
      ...

Ну и это, вот ещё что - картинки. Использовать картинки для демонстрации кода НЕ НАДО. Используйте тэг code.

[misterobot404]

0xD34F,

то что, функция, чтобы её вызывать? Вроде бы строка - раз пытаетесь использовать в качестве src. Наверное, имеется в виду не "вызову", а "установлю новое значение"?

Да, я это и имел ввиду, спасибо