原因分析和解决思路

为什么在模板引擎(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引入本地图片的更多相关文章

  1. Vue - 引入本地图片的两种方式

    第一种,只引入单个图片,这种引入方法在异步中引入则会报错. 比如需要遍历出很多图片展示时 <image :src = require('图片的路径') /> 第二种,可引入多个图片,也可引 ...

  2. springmvc+jsp引用本地图片文件

    1.图片文件路径,注意图片文件夹和WEB-INFO文件夹同级 2.web.xml配置 <servlet-mapping> <servlet-name>default</s ...

  3. vue如何动态加载本地图片

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章. 通常,我们的一个im ...

  4. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  5. vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则

    第一种直接在main.js中引入,需要声明loader demo: import '!style-loader!css-loader!less-loader!./assets/css/common.l ...

  6. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  7. 富文本编辑器TInyMCE,本地图片上传(Image Upload)

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor) 第一步 下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js. 第二步 下载tinyMCE ...

  8. Nodejs Express下引入本地文件的方法

    Express的结构如下: |---node_modules------用于安装本地模块.     |---public------------用于存放用户可以下载到的文件,比如图片.脚本文件.样式表 ...

  9. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

随机推荐

  1. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  2. JDK设计模式之——工厂模式

    1.首先来看最普通的工厂模式 1.1 定义一个需要工厂生产的java类 package javaee.net.cn.factory; class Person{ private int age; pr ...

  3. Kali学习笔记37:APPSCAN

    APPSCAN是一款商业Web扫描器,被IBM公司收购 功能和AVWS.Burp类似,不过界面更加简单 APPSCAN的使用比Burp等开源软件要简单很多 所以我这里写得内容比较少,不过它的功能还是很 ...

  4. multiprocessing- 基于进程的并行性

    介绍 multiprocessing是一个使用类似于threading模块的API支持生成进程的包.该multiprocessing软件包提供本地和远程并发,通过使用子进程而不是线程有效地支持 全局解 ...

  5. 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)

    基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...

  6. MySQL(1)---索引

    索引  什么是索引? 索引是帮助Mysql提高获取数据的数据结构,换一句话讲就是“排好序的快速查找的数据结构”. 一.索引的分类 MySQL主要的几种索引类型:1.普通索引.2.唯一索引.3.主键索引 ...

  7. java提高(6)---Serializable

    Serializable--初解 一 序列化是干什么的? 我们知道,在jvm中引用数据类型存在于栈中,而new创建出的对象存在于堆中.如果电脑断电那么存在于内存中的对象就会丢失.那么有没有方法将对象保 ...

  8. 后端不会写页面怎么办?推荐几个好用的前端UI模板、组件对比

    前言 下面推荐并对比几个好用的前端UI模板 推荐给以下的人使用: 1.不想重复造轮子的后端 2.不想学bootstrap的后端 3.后端开发想自己写简单页面的 4.偷懒的前端 本文注重手机端,对web ...

  9. Nginx 配置https 服务

    一.HTTPS 服务 为什么需要HTTPS? 原因:HTTP不安全 1.传输数据被中间人盗用.信息泄露 2.数据内容劫持.篡改 HTTPS协议的实现 对传输内容进行加密以及身份验证 HTTPS加密校验 ...

  10. Vc数据库编程基础MySql数据库的常见库命令.跟表操作命令

    Vc数据库编程基础MySql数据库的常见操作 一丶数据库常见的库操作 1.1查看全部数据库 命令:  show databases 1.2 创建数据库 命令: Create database 数据库名 ...