加载图像(Vue.js，Django)

Question

我正在研究vue，并通过django api rest带来了一个映像。

table.vue

<tbody>
  <tr v-for= "usu in usuarios" :key="usu.id_usuarios">
    <th>{{usu.id_usuarios}}</th>
    <td>{{usu.nombre}}</td>
    <td>{{usu.username}}</td>
    <td>{{usu.perfil}}</td>
    <td>   
      <img 
        src='{{usu.foto}}' 
        class="img-circle elevation-2" 
        alt="User Image" 
        width="60"
      >
    </td>
    <td>{{usu.estado}}</td>
    <td>{{usu.ultimo_ingreso}}</td>
    <td class="text-center">
      <button 
        @click="modificar=true; abrirModal(cat)" 
        type="button" 
        class="editar btn btn-primary">
        <i class = "fa fa-pencil-alt"></i>
      </button>
    </td>
    <td class="text-center">
      <button
        @click="eliminar(cat.id_categoria,cat.categoria)"
        type="button"
        class="eliminar btn btn-danger"
        data-toggle="modal"
        data-target="#modalEliminar"
      >
        <i class="fas fa-dumpster-fire"></i>
      </button>
    </td>
  </tr>
</tbody>

这就是方法

async listar() {
  const res = await axios.get('https://sistema-control-inventario.herokuapp.com/usuarios/');
  this.usuarios = res.data;
  this.image = res.data.foto;
},

并以这样的方式显示出来

​

​

这会出现在终端的照片代码中。

​

​

我怎样才能正确得到这张照片？因为当我带来{{usu.foto}时，我得到了链接，但是当我把它放到src中时，它就不工作了。

Answer 1

尝试绑定src

:src='usu.foto'

或者如果不起作用，您可以创建方法：

methods() {
  getImage(imagePath) {
    return require(imagePath);
  }
}

然后在模板中调用该方法：

<img :src="getImage(usu.foto)" alt="">