我正在開發 vue，我正在通過 django api rest 帶來一個影像
表.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 中時它不起作用。
uj5u.com熱心網友回復：
嘗試系結src：
:src='usu.foto'
或者如果這不起作用，您可以創建方法：
methods() {
getImage(imagePath) {
return require(imagePath);
}
}
然后在模板中呼叫該方法：
<img :src="getImage(usu.foto)" alt="">
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332653.html
標籤：javascript 图片 Vue.js Django 休息框架 前端
上一篇：Vue.js，連接字串和變數的bootstrap-vue語法
下一篇：為輸入id生成uuid