vue springboot 显示图片
时间: 2023-05-22 12:01:29 浏览: 164
在 Vue 和 Spring Boot 中显示图片可以通过以下步骤实现:
1. 在 Spring Boot 中创建一个 RESTful API,用于获取图片的 URL。
2. 在 Vue 中使用 axios 或 fetch 等工具调用该 API,获取图片的 URL。
3. 在 Vue 中使用 img 标签来显示图片,将获取到的 URL 作为 src 属性的值即可。
以下是 Vue 中显示图片的示例代码:
<template>
<div>
<img :src="imageUrl" alt="图片">
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
imageUrl: '',
};
},
mounted() {
axios.get('/api/getImageUrl')
.then(response => {
this.imageUrl = response.data.imageUrl;
})
.catch(error => {
console.log(error);
});
},
};
</script>
请注意,上述代码仅为示例,实际情况中需要根据具体需求进行修改。
相关问题
图片上传vue springboot
图片上传的过程可以使用Vue和Spring Boot来实现。首先,你需要在前端使用Vue和Element UI来创建一个上传组件。可以参考[1]中提供的链接,里面有关于如何使用Element UI的upload组件来实现图片上传的代码示例。
在后端,你需要使用Spring Boot来处理上传的图片。你可以创建一个Controller来接收前端传递的图片文件,并将其保存到指定的磁盘位置。可以参考[1]中提供的链接,里面有关于如何使用Spring Boot来处理图片上传的代码示例。
另外,如果你想要在前端展示上传的图片,有两种方法可以实现。第一种方法是将图片保存在后端的静态资源目录下,然后通过访问静态资源的URL来显示图片。这种方法的缺点是上传的图片不能即时显示,需要等待静态资源刷新才能看到。第二种方法是将图片的路径保存在数据库中,然后通过后端接口将图片的URL返回给前端,前端再通过该URL来显示图片。这种方法可以实现即时显示上传的图片。
总结起来,图片上传的过程可以分为前端和后端两部分。前端使用Vue和Element UI来创建上传组件,后端使用Spring Boot来处理上传的图片并保存到指定的磁盘位置。如果需要在前端展示上传的图片,可以将图片保存在后端的静态资源目录下或者将图片的路径保存在数据库中,并通过后端接口返回给前端。
springboot+vue显示图片
在Spring Boot项目中,可以使用Spring Boot提供的静态资源处理机制来向Vue前端提供图片资源。首先,需要配置Spring Boot的静态资源目录,在application.properties中添加如下配置:
```
spring.resources.static-locations=classpath:/static/
```
在这个配置中,我们指定了静态资源的位置为“classpath:/static/”,也就是在Classpath下的static目录。在该目录下新建一个images目录,并在其中添加一张图片“test.jpg”。
接下来,在Vue的代码中通过axios请求Spring Boot的Restful API获取图片。代码如下:
```
<template>
<img :src="imageUrl" alt="Test Image">
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
imageUrl: ''
}
},
mounted() {
axios.get('/api/images/test.jpg', { responseType: 'arraybuffer' })
.then(res => {
const blob = new Blob([res.data], { type: res.headers['content-type'] })
this.imageUrl = URL.createObjectURL(blob)
})
}
}
</script>
```
在Vue中,通过mounted钩子函数发送一个GET请求,在请求中指定响应的数据类型是“arraybuffer”。当请求响应后,将响应数据转换成一个Blob对象,并将其转换成URL类型的图片地址,赋值给Vue实例的imageUrl属性。
最后,当Vue渲染完成后,可以在页面上看到图片的显示效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)