<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 warn]: Invalid prop: type check failed for prop "src". Expected String, got Promise.

请您参考如下方法:

由于您没有首先渲染所需的所有数据,因此必须随后更改属性。首先,您需要为您的项目使用 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”属性值(在我的示例中,我只是等待毫秒的随机值)。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!