【Bug解决】themleaf 相对路径引用 js 静态文件失效

wzz2333

于 2024-02-07 00:15:06 发布

阅读量381

点赞数 10

文章标签： bug javascript java spring boot html 后端前端

本文链接：https://blog.csdn.net/wzz2333/article/details/136063995

版权

原生 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>