针对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. angular中常用内置过滤器

    <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...

  2. Python对list操作的一些小技巧

    Python对list操作的一些小技巧  由于要搞数学建模,于是从熟悉已久的C++转战Python.虽然才上手,但是Python的语法糖就让我大呼过瘾.不得不说相比于C/C++,Python对于数据的 ...

  3. 带你用 Python 实现自动化群控设备

    1. 前言 群控,相信大部分人都不会陌生!印象里是一台电脑控制多台设备完成一系列的操作,更多的人喜欢把它和灰产绑定在一起! 事实上,群控在自动化测试中也被广泛使用!接下来的几篇文章,我将带大家聊聊企业 ...

  4. 实践案例丨教你一键构建部署发布前端和Node.js服务

    如何使用华为云服务一键构建部署发布前端和Node.js服务 构建部署,一直是一个很繁琐的过程 作为开发,最害怕遇到版本发布,特别是前.后端一起上线发布,项目又特别多的时候. 例如你有10个项目,前后端 ...

  5. SpringMVC 注解方式进行配置页面跳转

    @ 目录 修改IndexController 修改springmvc-servlet.xml 效果 修改IndexController 在类前面加上@Controller 表示该类是一个控制器 在方法 ...

  6. Today At AntDock 2020年8月21日

    前段时间,我在 Mac 上使用 CLion 进行 C++ 编译,但发现 #include<bits/stdc++.h> 居然出了问题,无法使用,Xcode 也不行.我试图查找资料,但一般都 ...

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

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

  8. cinder 卷迁移进度的代码分析

    一.cinder-api服务的入口函数 D:\code-program\cinder-ocata_cinder\cinder\api\contrib\admin_actions.py from cin ...

  9. Shell编程—创建函数

    1基本的脚本函数 函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用.要在脚本中使用该代码块时,只要使用所起的函数名就行了. 1.1创建函数 有两种格式可以用来在bash shell脚本中创建 ...

  10. Java多线程_Semaphore信号量

    概念: Semaphore是信号量,又称为信号灯,它可以控制某个共享资源可被同时访问的次数,即可以维护当前访问某一共享资源的线程个数,并提供了同步机制.当Semaphore的个数变成1时,即代表只允许 ...