vue从后台拿到图片地址显示在前端
时间: 2024-03-14 21:47:53 浏览: 122
VUE 图片上传-前端
在 Vue 中从后台获取图片地址并显示在前端有多种方法,以下是其中一种常用的方法:
1. 在 Vue 组件中定义一个 data 属性来存储图片地址:
```
<template>
<div>
<img :src="imageUrl" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: ''
}
},
methods: {
getImage() {
// 从后台获取图片地址
axios.get('/api/getImage')
.then(response => {
this.imageUrl = response.data.imageUrl
})
}
},
mounted() {
this.getImage()
}
}
</script>
```
2. 在组件的 mounted 钩子中调用方法来获取图片地址,使用 axios 发送 GET 请求获取图片地址。
3. 在 img 标签中使用 `:src` 绑定图片地址,即可将图片显示在前端。
注意:在实际应用中,需要根据具体的后台接口返回数据格式来修改代码。
阅读全文