jsp引入本地图片
原因分析和解决思路
为什么在模板引擎(JSP,ThemyLeaf等等)上不能正常显示本地图片?
因为在模板引擎中,你输入的路径名都会在前面默认加上项目路径(localHost:8080/XXX),导致路径错误
比如你输入的是:C:/test/test1.jpg
但实际的路径会变成 : localHost:8080/项目名/C:/test/test1.jpg
解决思路
使用映射路径,自己定义一个路径,把该路径映射到电脑本地路径
SpringBoot+ThymeLeaf显示本地图片
在application.properties中添加路径的映射
例子:
com.jy.localFile=C:/project_image/test/
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/\
, classpath:/static/, classpath:/public/, file:${com.jy.localFile}
就这么简单
com.jy.localFile :
自定义属性
spring.mvc.static-path-pattern :
就是springMVC配置前端处理器时的那个<url-pattern>.默认的就是/**,所以此处不写static-path-pattern也没问题
spring.resources.static-locations :
1).映射的路径, ${com.jy.localFile}前边的那一大串都是SpringBoot默认的配置,必须写上,否则默认配置会被覆盖而失效!
2).本地磁盘路径前必须加上file: , 表示是指一个具体的硬盘路径, 其他的使用classpath指的是系统环境变量
注意 : 1.修改默认配置的时候会把默认配置直接覆盖,所以在修改时要加上默认配置的内容
2.properties文件中反斜杠(\)表示连接
前台ThymeLeaf获取本地图片
th:src="@{/{imageName}(imageName=${session.user.imageName})}"
用传参的方式避免把${session.user.imageName})原文填入
jsp显示本地图片
通用解决方法:
在tomcat的server.xml配置文件中,在<host></host>标签中间添上一句
- <!-- docBase : 磁盘绝对路径,即本地图片存放地址 -->
- <!-- path : 虚拟路径, testProject是项目名 -->
- <!-- reloadable : 有文件更新时,是否重新加载 -->
- <Context docBase="C:\project_image\testProject" path="/testProject/upload" reloadable="true"/>
注 : 为什么path="/testProject/upload"而不是path="/upload"?(testProject是项目名)
比如项目地址是 : localhost:8081/testProject
如果设置为path="/upload",那么图片读取的地址会变为 : localhost:8081/upload/photo.jpg,这个错误地址是读取不到图片的,连项目都进不去.
如果path="/testProject/upload",则图片读取地址为 : localhost:8081/testProject/upload/photo.jpg,这样才能读取到图片.
jsp加载图片代码:
<img src="${pageContext.request.contextPath }/testProject/photo.jpg">
eclipse配置方法:
eclipse可以不用上边的配置方法,直接在eclipse内配置即可.
如下图,进入Add External Web Module界面,按照上边设置对应的docBase和path即可.
jsp引入本地图片的更多相关文章
- Vue - 引入本地图片的两种方式
第一种,只引入单个图片,这种引入方法在异步中引入则会报错. 比如需要遍历出很多图片展示时 <image :src = require('图片的路径') /> 第二种,可引入多个图片,也可引 ...
- springmvc+jsp引用本地图片文件
1.图片文件路径,注意图片文件夹和WEB-INFO文件夹同级 2.web.xml配置 <servlet-mapping> <servlet-name>default</s ...
- vue如何动态加载本地图片
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...
- JSP中<img>标签引用本地图片
问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...
- vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则
第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- 富文本编辑器TInyMCE,本地图片上传(Image Upload)
TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...
- Nodejs Express下引入本地文件的方法
Express的结构如下: |---node_modules------用于安装本地模块. |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...
- .net mvc4 利用 kindeditor 上传本地图片
http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...
随机推荐
- HBase数据模型
上次我们讲过了<HBase简介>,点击阅读有助于更好地理解本文.本文讲述的是HBase数据模型. 1.ROW KEY 决定一行数据按照字典顺序排序的.Row key只能存储64k的字节数据 ...
- less编译工具——koala使用介绍
1:使用koala编译软件 官网:http://koala-app.com/index-zh.html (目前官网点击下载没有反应,有人说可能是网络问题,但真正的原因是需要FQ才能下载了) 百度 ...
- Error running 'Unnamed': Address localhost:1099 is already in use
当使用idea运行项目时,出现‘Error running 'Unnamed': Address localhost:1099 is already in use’. 解决方案: 1.打开任务管理器 ...
- Redis(1)---五种数据结构
五种数据结构 一.全局key操作 --删 flushdb --清空当前选择的数据库 del mykey mykey2 --删除了两个 Keys --改 --将当前数据库中的 mysetkey 键移入到 ...
- mysql 架构篇系列 3 复制运行状态监控与选项参数说明
一. 概述 在上一篇中,搭建了一主一从的复制架构,这篇通过一些诊断方法来了解复制的运行状态和一些选项参数说明.上次mysql主从服务关机,今天在打开mysql服务,出现了错误信息. 1.首先 启动主从 ...
- sql server 锁与事务拨云见日(下)
在锁与事务系列里已经写完了上篇中篇,这次写完下篇.这个系列俺自认为是有条不紊的进行,但感觉锁与事务还是有多很细节没有讲到,温故而知新可以为师矣,也算是一次自我提高总结吧,也谢谢大伙的支持.在上一篇的末 ...
- 扒光IT界江湖骗子巴蜀万明的底裤
扒光IT界江湖骗子巴蜀万明的底裤 北京IT界出了个江湖骗子,名叫万明,常年在北京IT界乃至中国IT界招摇撞骗.因其姓名太过大众化,容易误伤他人,对搜索引擎也不够友好,所以前缀以其招摇撞骗常用的一家空壳 ...
- Mybatis解析mapper
众所周知,接口是不能被实例化的,但是日常开发中,我们经常能直接使用dao层对象的方法,这又是为什么呢. 带着这些问题,我们看下mybatis内部做了那些操作. Mapper解析 上文我们描述了myba ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 一个前端开发者换电脑的过程(IDE篇)
一台全新的电脑,需要做出怎样的改变,才可以摇身一变成为前端开发者能用的电脑呢.首先,我们需要安装一个编辑器,这里我们选择目前最火的vscode. 先去到它的官网,把对应版本的vscode下载下来. 然 ...