针对IDEA中Javaweb项目中无法加载图片

一、项目的结构及问题介绍

  1. 项目结构如下:

  1. 在500.jsp页面中访问了img目录下的相关图片,比如背景图片,我在500.jsp中是这样写的路径

     background: url(../img/500.png) 0 0 no-repeat;

    虽然在IDEA中能够正常的预览到图片,但是在生成项目的war包时,项目的目录结构却会发生变化,可能与我创建项目的方式有关,我这生成的结构还是和源码中的结构一样,即error/500.jspimg/500.png,此时文件所在的文件夹还是同级目录,但是在500.jsp却就是无法访问到这个图片

二、解决方案

这个问题的解决方案就是加上web应用的Application context地址,具体的意思就是网站应用的首页地址,这个具体的地址要看你的Tomcat配置。

  1. 查找项目对应的Application context,操作捕捉如下

  2. 按照上图的步骤就找到了你的项目的application context,然后接下在你要访问的图片地方,将其路径改为:

     url(/你的项目application context/你的图片的路径地址)

    比如我上面的一个错误无法访问图片的例子

     background: url(../img/500.png) 0 0 no-repeat;

    修改之后的应该是这样的:

     background: url(/Javaweb_jsp_war_exploded/img/500.png) 0 0 no-repeat;
  3. 再次重新启动项目,然后就可以看到页面中可以正常显示图片了,加油啊!

补充:

可以将application context设置为 /,那么上面的路径地址为:

 background: url(/img/500.png) 0 0 no-repeat;

IDEA中Javaweb项目图片加载不出来解决方案的更多相关文章

  1. Android中常见的图片加载框架

    图片加载涉及到图片的缓存.图片的处理.图片的显示等.而随着市面上手机设备的硬件水平飞速发展,对图片的显示要求越来越高,稍微处理不好就会造成内存溢出等问题.很多软件厂家的通用做法就是借用第三方的框架进行 ...

  2. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  3. 【Android】安卓中常用的图片加载方法

    一.通过相机选图片: 布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  4. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  5. Android高效异步图片加载框架

    概述 Android高效异步图片加载框架:一个高效的异步加载显示的图片加载框架,同时具备图片压缩,缓存机制等特性. 详细 代码下载:http://www.demodashi.com/demo/1214 ...

  6. 图片加载时间缓慢问题API

    一.背景       最近段时间,开发写值工具项目中,出现图片加载问题API,响应时间缓慢:为了优化图片加载问题,我进行图片压缩方法,然后API的图片加载还是慢,最终在自己无意中乱写找到了根本的原因. ...

  7. Android 框架修炼-自己开发高效异步图片加载框架

    一.概述 目前为止,第三方的图片加载框架挺多的,比如UIL , Volley Imageloader等等.但是最好能知道实现原理,所以下面就来看看设计并开发一个加载网络.本地的图片框架. 总所周知,图 ...

  8. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  9. Android项目框架之图片加载框架的选择

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 从Android爆发以后,自定义的控件如EditTextWithDelete.ActionBar.P ...

随机推荐

  1. C#LeetCode刷题之#169-求众数(Majority Element)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4048 访问. 给定一个大小为 n 的数组,找到其中的众数.众数是 ...

  2. Linux Centos 下安装npm 实测可用

    转载地址 https://blog.csdn.net/u012129607/article/details/60966045 1.root 登录linux 2.没有目录就自己创建一个 cd /usr/ ...

  3. 快速入门Mybatis

    框架概述 什么是框架 它是我们软件开发中的一套解决方案,不同的框架解决的是不同的问题.使用框架的好处:框架封装了很多的细节,使开发者可以使用极简的方式实现功能.大大提高开发效率 三层架构 UI(表现层 ...

  4. HTML实例-02-京东顶部导航条

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. MySQL设置跳过密码验证

    1.linux系统下 在/etc/my.cnf文件中, [mysqld]下面新增skip-grant-tables,然后重启服务器.

  6. 基于Prometheus和Grafana打造业务监控看板

    前言 业务监控对许许多多的场景都是十分有意义,业务监控看板可以让我们比较直观的看到当前业务的实时情况,然后运营人员可以根据这些情况及时对业务进行调整操作,避免业务出现大问题. 老黄曾经遇到过一次比较尴 ...

  7. 微众银行FATE联邦学习框架

    参考:https://github.com/webankfintech/fate https://www.fedai.org/#/ 一.Docker Standalone 安装 FATE $ sh b ...

  8. Shell编程—gawk进阶

    1使用变量 awk编程语言支持两种不同类型的变量: 内建变量 自定义变量 1.1内建变量 1. 字段和记录分隔符变量 数据字段变量允许你使用美元符号($)和字段在该记录中的位置值来引用记录对应的字段. ...

  9. 「Netty实战 02」手把手教你实现自己的第一个 Netty 应用!新手也能搞懂!

    大家好,我是 「后端技术进阶」 作者,一个热爱技术的少年. 很多小伙伴搞不清楚为啥要学习 Netty ,今天这篇文章开始之前,简单说一下自己的看法: @ 目录 服务端 创建服务端 自定义服务端 Cha ...

  10. Java 接口简述

    Java 接口 接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并 ...