estoy trabajando en vue y traigo una imagen a través de django api rest

mesa.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>

y este es el metodo

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

y lo muestra de esta manera

y esto aparece en el codigo de la foto en el terminal

¿Cómo obtengo la foto correctamente? porque cuando traigo el {{usu.foto}} me sale el link pero cuando lo pongo en el src no funciona.