javascript - 加载图像(Vue.js、Django)
问题描述
我正在开发 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 中时它不起作用。
解决方案
尝试绑定src
:
:src='usu.foto'
或者如果这不起作用,您可以创建方法:
methods() {
getImage(imagePath) {
return require(imagePath);
}
}
然后在模板中调用该方法:
<img :src="getImage(usu.foto)" alt="">
推荐阅读
- c# - 是否可以使用git标记所有文件
- azure - 如何将 .yml 作业脚本作为单个任务,作为具有其他步骤的管道的一部分?
- php - 没有这样的元素:无法找到元素:{"method":"css selector","selector":"body select[name='Accept']"}
- doctrine - mysql 函数的本机查询或 DoctrineExtensions
- azure - 由于资源提供程序注册错误,无法创建 Azure Web App Bot
- android - ERROR: Could not find org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.31
- php - 通过 WooCommerce 中的功能显示高级自定义字段
- php - 播种/创建多对多关系
- excel - export-csv powershell后格式化excel文件
- javascript - Node JS - 通过它们的键合并对象,其中键是未知的