编写两个文档,一个是JSP文档,命名为myJsp.jsp;另一个是普通的HTML文档,命名为myPhoto.html。
要求:
1.在myPhoto.html插入自己的照片,在myJsp.jsp中嵌入<jsp:include>操作指令,当在浏览器中运行时能够将myPhoto.html中的照片显示出来
2.将照片放在resources文件下通过配置成功导入照片资源
3.照片位置在浏览器居中,上方写有XXX照片一并居中
第一步:将照片拖拽到resources文件下
第二步:建一个html文件,命名为myPhoto.html并编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>myPhoto</title>
<style>
.text{
text-align: center;
}
</style>
</head>
<body>
<div class="text">
<h2>迪丽热巴的照片</h2><br>
<img src="dilireba.jpg" alt="照片" width="450" height="520"/>
</div>
</body>
</html>
第三步:建一个JSP文件编写
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<jsp:include page="myPhoto.html">
</jsp:include>
</body>
</html>
然后运行~~~~~
What!!!!这是什么情况~~此时如果你的情况也是这样,不要着急,我们接着往下看~~~
我们只需要将resources资源成功导入Web资源目录,就又可以成功显示图片了~
在这里我以汉化版的idea示例,当然我相信聪明的你们也可以通过位置自己找到英文版的设置
方法一:
这里的相关路径框框空着就行
添加成功后运行,成功显示照片~~~
方法二:
用方法二得将图片的文件夹放在webapp目录中,而不能放在resources目录下,如下图所示
然后进行Tomcat的配置
需要注意这里应用程序上下文的路径,在myPhoto.html的图片路径中需要加上此路径方可成功显示图片
之后运行,成功显示照片~~~
如果你运行后是这样的(如下图所示),说明出现了乱码
解决办法:
将代码中
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
gbk修改为UTF-8即可