Vue.js：在axios.get之后使用方法返回图像

Question

<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）返回以下内容：

我使用的API返回的是Base64映像。

使用我当前的代码，我在浏览器控制台中仅收到以下错误：

  

[Vue警告]：道具无效：道具“ src”的类型检查失败。期望的字符串，得到了承诺。

Answer 1

由于您没有一开始就需要呈现的所有数据，因此之后必须更改属性。首先，您需要为项目使用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”属性值（在我的示例中，我只是等待一个毫秒的随机值）。