前端vue如何通过URL访问存储在服务器或磁盘的图片
更新时间:2024年02月06日 10:19:04 作者:keep the
在Vue中,通常需要将图片存储在服务器端,并通过url地址来访问,下面这篇文章主要给大家介绍了前端vue如何通过URL访问存储在服务器或磁盘的图片的相关资料,需要的朋友可以参考下
前言
这里前端访问使用的是element
一、前端
说明:
scope.row.img 是后端返回的URL数组
<el-table-column sortable prop="img" label="图片" width="200"> <template slot-scope="scope"> <el-image style="width: 100px; height: 100px" :src="setImgUrl(scope.row)" :preview-src-list="scope.row.img"></el-image> </template> </el-table-column> -------------------------------------------------------------------- setImgUrl方法 /设置产品第一张图片 setImgUrl(row) { if(row.img.length != 0) { return row.img[0] }else { return "" } }
二、后端
1.配置文件
#文件上传保存路径 file.path.localPath=D:/Admind/java/project/crm/src/main/resources/images/
2.拦截器配置
注意:如果配置有其他的拦截器,一定要排除“/images/**”路径,不要拦截它
@Configuration public class InterceptorConfig implements WebMvcConfigurer { @Value("${file.path.localPath}") private String path; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //图片访问 registry.addResourceHandler("/" + FileUtils.getPathLastName(path) + "/**").addResourceLocations("file:" + path + "/"); } }
FileUtils工具类
工具类调用getPathLastName方法的目的是获取路径的最后一个目录名,作用是:配置文件存储图片的path的路径修改的时候,也同样能够访问得到,不用我们去到代码中进行修改,降低了冗余度。
public class FileUtils { /** * 获取文件路径最后的名 * @return */ public static String getPathLastName(String path) { int i = path.lastIndexOf("/") + 1; return path.substring(i); } }
3.访问效果
我的图片存在位置:
总结
到此这篇关于前端vue如何通过URL访问存储在服务器或磁盘的图片的文章就介绍到这了,更多相关vue访问存储服务器的图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue响应式系统之observe、watcher、dep的源码解析
这篇文章主要介绍了vue响应式系统之observe、watcher、dep的源码解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04Vue上传组件vue Simple Uploader的用法示例
本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例,非常具有实用价值,需要的朋友可以参考下2017-08-08vue watch中如何获取this.$refs.xxx节点
这篇文章主要介绍了vue watch中获取this.$refs.xxx节点的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
最新评论