针对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. 2020-04-08:谈一下IOC底层原理

    Ioc的底层原理 (1)xml配置文件 (2)dom4j解析xml (3)工厂设计模式 (4)反射

  2. C#LeetCode刷题之#665-非递减数列( Non-decreasing Array)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3732 访问. 给定一个长度为 n 的整数数组,你的任务是判断在最 ...

  3. 轻轻松松学CSS:position

    position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...

  4. 微信小程序自动化测试最佳实践(附 Python 源码)

    本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善,很多公司的产品业务形态逐渐从 App 延升到微信小程序.微信公众号等.小程 ...

  5. 笔记:phpstudy、虚拟机CentOS安装、Linux命令

    一.phpstudy 1.phpstudy实现w(Windows)a(Apache)m(Mysql)p(php)环境 Apache  用来发布Web服务   80端口 MySQL   开源的建议灵活的 ...

  6. kvm 虚拟机中鼠标不同步的问题解决方法

    在<devices>标签下添加 <input type='tablet' bus='usb'/>    

  7. 数据分析-RFM模型用户分析

    RFM模型 根据美国数据库营销研究所Arthur Hughes的研究,客户数据库中有3个神奇的要素,这3个要素构成了数据分析最好的指标: 最近一次消费 (Recency) 消费频率 (Frequenc ...

  8. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  9. 百度支持链接的nofollow属性吗

    http://www.wocaoseo.com/thread-269-1-1.html 简单明确的一个问题,百度目前支持链接的nofollow属性吗?rel='external nofollow' 复 ...

  10. git最基础常用操作

    单人开发托管够用 未列出的用到一个补一个