加载图像（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}} 我得到了 link 但是当我把它放在 src 中时它不起作用。

Answer 1

尝试绑定src:

:src='usu.foto'

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

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

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

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

加载图像（Vue.js，Django）

Load an image (Vue.js, Django)

javascript

frontend

image

django-rest-framework

vue.js