JSP插入照片升级版（包括resources资源导入以及乱码问题）

编写两个文档，一个是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即可

JSP插入照片升级版（包括resources资源导入以及乱码问题）

猜你喜欢