引用图片显示到前端的策略

☆樱花仙子☆ 提交于 2020-01-25 00:14:40

引用图片显示到前端的策略:
在这里插入图片描述
①最直接的方式–>使用本地绝对路径,如:

D:\EclipseJEE\JavaEEProject\JavaEE-Test3.1\WebContent\img\name.png

注意:绝不提倡,这样虽然能在本地浏览器(Eclipse浏览器)上显示,但在网页浏览器上无法加载,因为网页服务器是在Tomcat的指定路径(工程下)下执行的。从网页浏览器中复制该图片地址为about:blank。
②使用EL表达式表示当前的相对路径,示例:${pageContext.request.contextPath }/img/name.png
注意:此时网页浏览器中图片可见,复制该图片地址为

http://localhost:8880/JavaEE-Test3.1/img/name.png

,于是我们便有了策略③。
③src=”工程名/文件夹名/图片全名”
<img src="JavaEE-Test3.1/img/name.png"/>,理想很美好,现实很残酷。看似可行的路径,然而在浏览器上还是加载失败,复制其图片路径为

http://localhost:8880/JavaEE-Test3.1/jsp/JavaEE-Test3.1/img/name.png

,和②中正确的图片路径相比多了jsp/JavaEE-Test3.1;
尝试着改成<img src="img/name.png"/>后,依然加载不出来,复制其图片路径为

http://localhost:8880/JavaEE-Test3.1/jsp/img/name.png

恍然大悟!原来jsp程序默认执行路径是

http://localhost:8880/JavaEE-Test3.1/jsp

,而我们的图片资源不在jsp文件夹下,而在另一个img文件夹下。因此无论怎样修改src路径都无济于事(EL表达式除外),故不得不从程序的执行路径下手,从而有了策略④。
④在jsp文件首部通过Java程序片,拼接一个基地址basePath:

<%	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ request.getContextPath();+ "/";	%>

或者

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" request.getServerName() 	+ ":" + request.getServerPort()+ path + "/";
%>

然后将这个basePath以base标签<base href="<%=basePath %>"/>
嵌入中,从而指定基址路径为:

http://localhost:8880/项目名/

此例为

http://localhost:8880/JavaEE-Test3.1

,这正是我们所想要的。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!