加载图像（Vue.js、Django）答案

【问题标题】：Load an image (Vue.js, Django)加载图像（Vue.js、Django）
【发布时间】：2021-12-09 10:29:35
【问题描述】：

我正在开发 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 中时它不起作用。

【问题讨论】：

标签： javascript image vue.js django-rest-framework frontend

【解决方案1】：

尝试绑定src:

:src='usu.foto'

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

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

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

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

【讨论】：