IDEA中静态资源引入失败问题

最新推荐文章于 2023-05-06 16:50:38 发布
原创 最新推荐文章于 2023-05-06 16:50:38 发布 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #html #css #javascript #html5

本文介绍了解决IDEA中Web项目静态资源（如CSS、JS和图片）加载失败的问题，通过调整引用路径从“/static/...”更改为“../static/...”，解决了浏览器404错误。

项目场景：

在IDEA中建立的Web项目

问题描述：

在html页面中，引入CSS，JS，图片失败，但是在IDEA中按住ctrl+鼠标左键点击引入连接能跳转到对应的静态资源文件。
错误配置如下：

<link rel="stylesheet" href="/static/layui/css/layui.css" />
		<script src="/static/layui/layui.js"></script>

原因分析：

我的html中所有引入的静态资源都是以这种方式，这个/转到根目录隐患属实很大，但是这个点它能跳转到对应的页面也属实离谱，以至于我排错的过程很难定。
浏览器里访问静态资源（这里指CSS，JS，图片）报错404，JS和CSS的引入也报错（这里不想把对的文件改错在运行了，于是不截图了），但是html页面却不是404而可以打开，如果是SpringMVC配置的静态资源处理有问题，那么这个html也应该是404才对，但是没有其他解决办法只能改处理静态资源的方式，在SpringMVC的配置文件那下手，但是不管怎么改都没效果。
随后又各种修改，但是查找资料基本都说是我这里静态资源引入的路径不对，然后就抱着不太可能成功的心态去换了路径——

解决方案：

这个简单但困住我的问题真是问题出在了引入路径上，

修改前（错误）

<link rel="stylesheet" href="/static/layui/css/layui.css" />
		<script src="/static/layui/layui.js"></script>

修改后（正确）

<link rel="stylesheet" href="../layui/css/layui.css" />
		<script src="../layui/layui.js"></script>

错误的路径开头就是‘/’，这个是根目录的意思，那么他就要到根目录去找，对于IDEA来说，这个根目录应该就是webapp，所以点击可以正确的跳转，但是对于这个单纯的HTML文件来说，这个’/‘根目录，说不定真就根到盘符去了，各种找不到。。。
所以以后路径问题要有更好的方式去处理，开头可千万别整个’/'了。

解决idea使用maven管理项目时资源文件无法部署到target下的classes文件夹中
喜欢猪猪
11-18 1341
1.查看子maven工程里面有没有这样的代码： <packaging>pom</packaging> ，需求删除这句代码，否则会认为是父maven工程，target里面不会生成配置资源xml文件
Java 静态导入
weixin_33800593的博客
01-23 253
静态导入Static import 　　要使用静态成员（方法和变量）我们必须给出提供这个静态成员的类。 　　使用静态导入可以使被导入类的静态变量和静态方法在当前类直接可见，使用这些静态成员无需再给出他们的类名。 　　静态导入也是JDK5.0引入的新特性，下面以实例来说明静态导入的用法： 　　 　　比如先在一个包中定义一个这样的类：  　　 package com.example....
idea中web工程导入静态资源无法使用
CodeJR
12-18 1848
今天在学习Ajax的时候，使用idea作为编辑器，然后发现在我新建了js文件夹并且把jQuery文件复制到js文件夹之后无效，解决方案如下：（CSS图片等静态资源同样适用） 检查引入时候的地址是否出错，检查这个最简单的方法就是按住键盘Ctrl键，然后鼠标左击jQuery名字，如果能够进入到jQuery文件中，那么就没错。 如果你是使用springMVC开发的，并且你的DispatcherServ...
idea发布项目后,无法在浏览器页面加载到静态资源
woshigehuaidan的博客
08-02 1696
idea发布项目后,无法在浏览器页面加载到静态资源 最近在准备做一个网站的时候,想把这个项目的环境搭建一下,搭建完之后测试时,页面可以加载出来,然后自己就准备用js跟bootstrap修改一下样式,刚开始还算能够成功,可突然再次测试时就没办法加载出来样式了,而且连图片都加载不到了,这个问题困扰了好久,网上各种办法都试过了,还是不可行。 曾经在做毕设的时候也遇到过类似的问题,但那个时候图片是可以加载出来的.所以我个人总结以下几个场景。** 这是我遇到过的场景： 当页面能够加载到图片，知识CSS样式无法
JDK5新特性之静态导入
gafeng123456的博客
02-29 746
静态导入 格式：import static 包名….类名.方法名; 可以直接导入到方法的级别 静态导入的注意事项： A:方法必须是静态的 B:如果有多个同名的静态方法，容易不知道使用谁?这个时候要使用，必须加前缀。由此可见，意义不大，所以一般不用，但是要能看懂。 package cn.itcast_02;import static java.lang.Math
【编程问题】IDEA 修改静态资源文件夹名称导致资源加载失败
李晋江的博客
07-21 1150
IDEA 修改静态资源文件夹名称导致资源加载失败IDEA 修改静态资源文件夹名称导致资源加载失败问题描述解决办法 IDEA 修改静态资源文件夹名称导致资源加载失败 系统：Win10 IDEA：2017.3.2 问题描述 最近在做一个 SSM 项目的时候，中途修改了一个存放 css 文件的文件夹名称（Back 改为 back），后续将所有引用的链接也都改过来了，结果重新运行项目的时候，该文件夹下的 css 文件加载不出来了，当我把链接地址重新改为 Back 时（文件夹的名称还是 back），居然能重新加载
解决IDEA中Tomcat部署Web应用时静态资源加载不到的问题
在部署Web应用至IDEA中Tomcat时，遇到静态资源加载失败的问题。表现为页面无法正常显示样式、图片等静态资源。经检查发现，静态资源的路径并未被正确加载，导致页面元素缺失。这可能是由于应用目录结构问题或Tomcat...
IDEA - 热部署插件JRebel ,对静态资源javascript、css、vm文件进行热部署
m0_46580493的博客
11-10 2588
IDEA - 热部署插件JRebel ,对静态资源javascript、css、vm文件进行热部署 IDEA配置JRebel热部署（超级详细图文教程）
springboot静态资源导入
DREAM5555的博客
06-22 648
目录方式一：通过WebJars1.webjars简介2.webjars的使用3.webjar结构4.源码解析5.测试访问方式二：通过静态资源目录1.源码解析2.测试访问 springboot静态资源导入方法 classpath:/META-INF/resources/：webjars资源的目录 classpath:/resources/：reources目录下的resources目录，不存在自己新建 classpath:/static/：resources目录下的static目录 classpath:/p
jsp 网站引入外部css或者js失效问题解决
11-28
解决这个问题的方法是，在过滤器的配置中，明确指定过滤器应拦截的请求路径，确保静态资源不受影响。在`web.xml`配置文件中，你可以这样设置： ```xml <filter-name>login *.jsp ``` 在这个例子中，过滤器只会...
idea运行flink程序报错：static methods in interface require -target:jvm-1.8
东城庞太师
03-23 447
解决：添加-target:jvm-1.8 到Scala Compiler 或者在pom.xml文件中添加如下配置 <configuration> <addScalacArgs>-target:jvm-1.8</addScalacArgs> </configuration>
idea设置java静态导包
weixin_42070470的博客
07-05 2782
挨个找: File -> Settings -> Code Style -> Java -> Imports 然后在界面找到 ** Packages to Use Import with ‘*’ 点击 + ,粘贴你需要导入的包路径,点对勾,点apply,导包,看效果 import static org.springframework.test.web.servlet.req...
idea报错“Static methods in interface require -target:jvm-1.8”
mc的博客
06-02 670
问题的原因很明显是 idea 中的 jdk 版本设置有问题，针对性作如下排查
Drools7在Intellij IDEA下的引入静态方法错误提示
程序新视界
07-13 1万+
问题在Intellij IDEA 2016下，默认安装了Drools的插件，但使用Drools7（其他版本应该也有问题）时发现，在DRL文件中引入的静态方法IDEA会提示“Cannot resolve”，而代码可以正常执行。示例定义了DroolsStringUtils类，类中有一个isEmpty的静态方法，在drl文件中的代码如下：package com.rulesimport static com
IDEA+springMVC+Tomcat中部分静态资源js引入失败问题。
weixin_43217564的博客
10-03 550
作者昨天引入了几个静态资源js，但是发现Debug的时候这几个js找不到。而其他js都是能找到得，在IDEA中也能够通过Ctrl+单击引用路径找到对应得js，而这个js依赖的其他js也已经引入，也就是说路径没有问题，引入的位置也没有问题，结果数次检查springMVC的配置文件，拦截器，静态资源映射（<mvc:resources mapping="/static/**" location="...
intellij idea无法访问静态资源
热门推荐
村长在路上
05-17 1万+
http://www.zhihu.com/question/23077380/answer/23539375 知乎上面的一个帖子 静态文件不应该放在WEB-INF下面，java web容器认为这是私有目录，不允许直接访问。导致的问题是页面html文件内容有,但是图片文件无法访问。 解决办法:将存放图片的static文件夹放置webapp目录下。static和WEB-INF是同一级目录
IDEA中javaWeb项目静态资源无法访问/静态资源没有部署到Tomcat
一碗单炒饭的专栏
03-23 7740
关于IDEA没有将项目静态资源拷贝到tomcat的问题 因为没有将放置静态资源的目录设置为资源目录，所以没有被拷贝至tomcat下 解决方法 File -> Project Structure… -> Modules 选择静态资源目录（一般叫WebRoot/WebContent） Mark as: Resources ...
Java 中使用import static编译报错，怎么办
lisa2017_的博客
05-06 483
Java 中使用import static编译报错
解决IDEA 无法加载静态文件
qq_43020748的博客
10-27 3374
package cn.edu360.sell.configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter...
用idea jsp写一个静态页面
最新发布
09-29
<think>首先，用户的问题是：“我想获取使用IntelliJ IDEA编写JSP静态页面的方法。请问使用IntelliJ IDEA编写JSP静态页面的教程？”用户的指令是基于系统级的要求，包括使用特定的LaTeX格式、中文回答、生成相关问题等。 系统级指令回顾： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法必须正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如[^1]。 用户提供了几个引用： - [^1]: 解释了JSP是什么。 - [^2]: 关于IDEA下载和版本。 - [^3]: 创建一个Maven项目，包含JSP页面示例和Tomcat配置。 - [^4]: IDEA的学习，包括项目结构和资源管理。 用户的问题焦点是：使用IntelliJ IDEA编写JSP静态页面的教程。注意，"静态页面"可能是个误称，因为JSP是动态网页技术，但用户可能指的是包含静态内容的JSP页面。用户提到“JSP静态页面”，但JSP本质上是动态的，不过它可以包含静态HTML内容。我应该澄清这一点。 关键点： - 用户想要一个教程，使用IntelliJ IDEA编写JSP页面。 - 引用[^3]提供了创建Maven项目、编写JSP页面和配置Tomcat的例子。 - 引用[^4]讨论了项目结构，如src/main/webapp。 - 引用[^1]解释了JSP基础。 我的回答需要： 1. 结构清晰，逐步解释。 2. 使用中文。 3. 引用相关部分时添加引用标识。 4. 生成相关问题。 5. 确保回答可靠，基于提供的引用。 回答结构： - **引言**：简要解释JSP和使用的工具。 - **步骤**：逐步指导如何在IntelliJ IDEA中创建项目、编写JSP页面、运行它。 - 创建一个项目（可能是Web或Maven项目）。 - 添加JSP文件（位置在src/main/webapp）。 - 编写JSP代码（包括静态内容）。 - 配置服务器（如Tomcat）。 - 运行和测试。 - **代码示例**：展示一个简单的JSP页面，包含静态HTML。 - **注意事项**：如字符编码设置。 - **相关问题**：最后生成相关问题。 基于引用： - 从[^3]，有一个JSP页面示例：index.jsp，包含HTML和资源引用。 - [^4]提到项目结构：src/main/webapp是存储页面的地方。 - [^3]也提到了配置Tomcat服务器。 由于用户问的是“静态页面”，我应该强调JSP页面中可以包含静态内容，但JSP本身允许动态部分。所以，教程可以专注于创建主要是静态内容的JSP页面。 步骤概述： 1. **创建项目**：使用IntelliJ IDEA创建一个Web项目或Maven项目。 2. **添加JSP文件**：在webapp目录下创建JSP文件。 3. **编写JSP**：使用HTML和JSP语法编写内容。 4. **配置服务器**：设置Tomcat并部署项目。 5. **运行和测试**：启动服务器访问页面。 确保引用： - 在提到JSP定义时引用[^1]。 - 在项目结构和文件位置引用[^4]。 - 在JSP示例和配置引用[^3]。 生成相关问题： - 类似系统指令示例，基于主题生成2-3个相关问题。 - 例如：如何优化JSP页面？常见问题解决？与Servlet的集成？ 最终回答格式： - 使用Markdown，代码块用于代码。 - 语言：中文。 - 添加引用标识自然地在末尾。 </think>### 使用IntelliJ IDEA编写JSP静态页面的教程 JSP（Java Server Pages）是一种动态网页技术，允许在HTML文件中嵌入Java代码和JSP标记，常用于服务器端渲染。虽然JSP本质是动态的，但您可以编写包含静态内容的JSP页面（如纯HTML、CSS或JavaScript）。以下是基于IntelliJ IDEA的逐步教程，参考了提供的引用内容。我将使用Maven项目模板（简单且标准），确保步骤清晰可靠。 #### 步骤1: 创建Maven Web项目 首先，在IntelliJ IDEA中创建一个Maven项目： - 打开IDEA，选择“File” > “New” > “Project”。 - 在左侧菜单中选择“Maven”，勾选“Create from archetype”，然后选择“org.apache.maven.archetypes:maven-archetype-webapp”（这是一个标准的Web应用模板）。 - 输入项目名称（如“JSPDemo”），选择保存位置，点击“Finish”。 - 项目结构自动生成：`src/main/webapp` 文件夹用于存放JSP和静态资源（如CSS、JS），`src/main/java` 用于Java代码，`src/main/resources` 用于配置文件[^4]。 > **注意**：如果您尚未安装IntelliJ IDEA，可从官方下载（推荐旗舰版支持完整Web开发功能）[^2]。 #### 步骤2: 添加JSP静态页面 在`src/main/webapp`目录下创建JSP文件： - 右键点击`webapp`文件夹，选择“New” > “JSP/JSPX”。 - 输入文件名（如`index.jsp`），IDEA会自动生成基本模板。 - 编辑文件，添加静态内容。例如，创建一个纯HTML按钮和标题的页面（无Java动态代码）： ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>静态页面示例</title> <!-- 引入静态CSS和JS资源（可选） --> <link href="static/css/style.css" rel="stylesheet"> <script src="static/js/script.js"></script> </head> <body> <h1>欢迎访问静态JSP页面</h1> <button type="button" class="btn">点击这里</button> </body> </html> ``` > **关键点**： > - `<%@ page contentType="text/html;charset=UTF-8" language="java" %>` 设置字符编码以防止乱码（必须添加）[^3]。 > - 静态资源（CSS、JS）通常放在`src/main/webapp/static`目录下，路径需相对引用（如上例中的`href="static/css/style.css"`）[^4]。 > - 此页面只包含HTML，无动态JSP标签（如`<% ... %>`），实现“静态效果”。 #### 步骤3: 配置Tomcat服务器 JSP页面需要Web服务器（如Tomcat）运行： - 在IDEA顶部菜单，选择“Run” > “Edit Configurations”。 - 点击“+”添加新配置，选择“Tomcat Server” > “Local”。 - 在“Deployment”标签页，点击“+” > “Artifact”，选择您的项目（如“JSPDemo:war exploded”）。 - 确保“Application context”设置为根路径（如“/”），然后点击“Apply”和“OK”[^3]。 #### 步骤4: 运行和测试页面 - 点击IDEA工具栏的绿色“Run”按钮（或Shift+F10），启动Tomcat服务器。 - 等待控制台输出“Tomcat started on port(s): 8080”，表示服务器已启动。 - 打开浏览器，访问`http://localhost:8080/index.jsp`，您将看到静态HTML内容渲染的页面。 - 如果修改JSP文件，IDEA支持热重载：保存文件后刷新浏览器即可更新内容。 #### 常见问题解决 - **乱码问题**：确保JSP顶部有`<%@ page contentType="text/html;charset=UTF-8" %>`，并在IDEA设置中检查编码（File > Settings > Editor > File Encodings）设为UTF-8[^3]。 - **CSS/JS无法加载**：检查静态资源路径是否正确（相对`webapp`目录），并在浏览器控制台调试错误。 - **服务器启动失败**：确认Tomcat版本兼容（推荐Tomcat 9+），并通过Maven更新依赖（右键项目 > Maven > Reload project）[^3][^4]。 通过以上步骤，您可以在IntelliJ IDEA中高效编写和运行JSP静态页面。JSP允许混合静态和动态内容，但本教程专注于静态实现以满足初学者需求。JSP技术基于Servlet规范，适合构建Web应用前端[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值