Как грузить изображения асинхронно?

Question

[IskDev]

В консоли ссылка выводится, но картинки не отображаются

import {ref as storageRef, getDownloadURL} from "firebase/storage"

let loadImage = async (name) => {

    const listRef =  storageRef(storage, "/images/" + name + ".png")

    const url = await getDownloadURL(listRef)
    console.log(url)

    return url
  }

<div v-for="characterInfo in characterScore.characterData">
        <p>{{ characterInfo.name }}</p>
        <img
             :src="characterScore.loadImage(characterInfo.name.toLowerCase())"
             :alt="characterInfo.name">
      </div>

Comments

[Дмитрий Кузнецов]

Пути правильные? Что говорит консоль?

[Вадим]

Дмитрий Кузнецов, не причём тут пути. У автора в src промис кладётся, так как async функция всегда возвращает промис.

[Дмитрий Кузнецов]

Вадим, ай блин, точно)

[WapSter]

Ассинхронные изображения, что-то новенькое

Answer 1

[imko]

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