Vue.js: вернуть изображение методом после axios.get - PullRequest
Новая
       14

Vue.js: вернуть изображение методом после axios.get

0 голосов
/ 14 января 2019 
<li v-for="people in projectData.employees" :key="people._id">
    <b-img :src="colleagueImages(people)" 
</li>

async colleagueImages(people) {
  console.log(people); // => max@stackoverflow.com
  let profileImage = await axios.get("http://myapilink.com/image?id=" + people + "&s=200&def=avatar", {
    headers: {
      'accept': 'image/jpeg'
    }
  });
  console.log(profileImage);
  return 'data:image/jpeg;base64,' + btoa(
    new Uint8Array(profileImage.data)
    .reduce((data, byte) => data + String.fromCharCode(byte), '')
  );
}

console.log (profileImage) возвращает следующее:

Chrome console.log API, который я использую, возвращает изображение Base64.

С моим текущим кодом в консоли браузера появляется только следующая ошибка:

[Vue warn]: недопустимая проп: проверка типа не выполнена для проп "src". Ожидаемая строка, есть обещание.

1 Ответ

0 голосов
/ 15 января 2019

Поскольку у вас нет всех данных, которые вам необходимо визуализировать, вам придется изменить атрибуты впоследствии. Во-первых, вам нужно использовать компоненты Vue для ваших предметов, чтобы ваш атрибут "src" был реактивным; во-вторых, вы запускаете запросы на ваши элементы после того, как вы представили свое приложение. Пожалуйста, посмотрите этот макет. 

Vue.component('todo-item', {
  template: `
    <li>
      <label>
        <input type="checkbox"
          v-on:change="toggle()"
          v-bind:checked="done">
        <del v-if="done">
          {{ text }}
        </del>
        <span v-else>
          {{ text }}
        </span>

        <span v-if="like">
            ♥ {{like}}
        </span>
      </label>
    </li>
    `,
  props: ['id', 'text', 'done', 'like'],
  methods: {
    toggle: function(){
        this.done = !this.done
    }
  }
})
let todos = [
      {id: 0, text: "Learn JavaScript", done: false, like: null },
      {id: 1, text: "Learn Vue", done: false, like: null },
      {id: 2, text: "Play around in JSFiddle", done: true, like: null },
      {id: 3, text: "Build something awesome", done: true, like: null }
    ]
const v = new Vue({
  el: "#app",
  data: {
    todos: todos
  }
})

todos.forEach((item) => {
    // This is just a mock for an actual network request
    window.setTimeout(() => {
        item.like = Math.ceil(Math.random() * 100)
    }, Math.random() * 2000)
})

https://jsfiddle.net/willywongi/gsLqda2y/20/

В этом примере у меня есть базовое приложение со списком задач с фальшивым подсчетом «как» для каждого элемента, который вычисляется асинхронно. После настройки моего приложения я жду значения атрибута like (в моем примере я просто жду случайного значения в миллисекундах).

...