原生 HTML 文件 test.html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="https://memotrace.lc044.love/static/css/style.css">
<script type="text/javascript" src="../scripts/echarts.min.js}"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
</head>
项目结构:
使用 SpringBoot + themleaf 模板后,位于相对路径处../scripts/
目录下的 js 文件无法成功加载,导致 echarts 绘制的词云图未显示。
解决方案:
- 在
<html>
标签中添加xmlns:th="http://www.thymeleaf.org"
,这是使用 Thymeleaf 所必需的。 <script>
标签中的 src 属性替换为 th:src ,并使用@{}
语法来指定资源的路径。- 将 js 文件的相对 test.html 文件的路径修改为相对于
src/main/resources/static
目录的路径,即/scripts/echarts.min.js
。
在 Spring Boot 项目中,src/main/resources/static
目录是默认的静态资源目录。当在 Thymeleaf 模板中使用@{}
表达式来引用静态资源时,Spring Boot 处理这些静态资源的请求时,它会自动从src/main/resources/static
中查找匹配的文件。
修改后的 HTML 文件:
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="https://memotrace.lc044.love/static/css/style.css">
<script type="text/javascript" th:src="@{/scripts/echarts.min.js}"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
</head>